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内 容 简 介 


本 书 从 网 页 设计 实际 应 用 的 角度 理解 HTML5 和 CSS3 的 新 元 素 和 新 功能 ,合理 选取 教学 内 容 。 
本 书 设置 了 以 下 10 个 教学 单元 : 站 点 与 网 页 的 创建 、 网 页 中 文本 与 段落 的 应 用 设计 、 网 页 中 图 像 与 背 
景 的 应 用 设计 、 网 页 中 列表 与 表格 的 应 用 设计 、 网 页 中 超 链 接 与 导航 栏 的 应 用 设计 、 网 页 中 表单 与 控件 
的 应 用 设计 、 网 页 中 音频 与 视频 的 应 用 设计 、 网 页 中 图 形 绘制 与 操作 的 应 用 设计 、 网 页 中 特效 与 交互 的 
应 用 设计 、 网 页 中 元 素 与 整体 布局 的 应 用 设计 ,将 HTML5 和 CSS3 的 相关 知识 合理 安排 到 各 个 教学 单 
元 中 。 

本 书 编者 充分 调研 HTML5、CSS3 新 技术 的 实际 应 用 情况 ,优选 了 50 多 个 来 自 真实 网 站 的 典型 教 
学 案例 ,采用 “任务 了 驱动, 精 讲 多 练 ,理论 实践 一 体 化 ”的 教学 方法 ,改进 和 优化 教学 内 容 的 组 织 方法 和 网 
页 设计 技能 的 训练 方法 ,全 方位 促进 基于 HTML5 十 CSS3 网 页 应 用 设计 能 力 的 提升 。 每 个 教学 单元 面 
向 教学 全 过 程 设置 “知识 必 备 一 引导 训练 一 同步 训练 技术 进 阶 一 问题 探究 一 单元 习题 ”6 个 教学 环 
节 , 同 时 还 提供 了 丰富 的 配套 教学 资源 。 

本 书 可 以 作为 普通 高 等 院 校 .高 职高 专 或 中 等 职业 院 校 各 专业 网 页 设计 的 教材 ,也 可 以 作为 网 页 设 
计 的 培训 用 书 及 技术 用 书 。 


本 书 封 面 贴 有 清华 大 学 出 版 社 防伪 标签 ,无 标签 者 不 得 销售 。 
版 权 所 有 ,侵权 必 究 。 侵 权 举报 电话 : 010-62782989 13701121933 
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出 版 说 明 


我 国 高 职高 专 教育 经 过 十 几 年 的 发 展 ,已 经 转向 深度 教学 改革 阶段 。 
教育 部 于 2012 年 3 月 发 布 了 教 高 C2012] 第 4 号 文件 (关于 全 面 提高 高 等 
教育 质量 的 若干 意见 》, 重 点 建设 一 批 特色 高 职 学 校 , 大 力 推行 工学 结合 ， 
突出 实践 能 力 培养 ,全 面 提高 高 职高 专 教学 质量 。 

清华 大 学 出 版 社 作为 国内 大 学 出 版 社 的 领跑 者 ,为 了 进一步 推动 高 
职高 专 计算 机 专业 教材 的 建设 工作 ,适应 高 职高 专 院 校 计 算 机 类 人 才 培 
养 的 发 展 趋势 ,2012 年 秋季 开始 了 切合 新 一 轮 教学 改革 的 教材 建设 工 
作 。 该 系列 教材 一 经 推出 ,就 得 到 了 很 多 高 职 院 校 的 认可 和 选用 ,其 中 部 
分 书籍 的 销售 量 超过 了 三 四 万 册 。 现 根据 计算 机 技术 发 展 及 教改 的 需 
要 ,重新 组 织 优秀 作者 对 部 分 图 书 进 行 改 版 ,并 增加 了 一 些 新 的 图 书 
品种 。 

目前 ,国内 高 职高 专 院 校 计算 机 相关 专业 的 教材 品种 繁多 ,但 符合 国 
家 计算 机 技术 发 展 需要 的 技能 型 人 才 培 养 方案 并 能 够 自 成 体系 的 教材 还 
不 多 。 

我 们 组 织 国内 对 计算 机 相关 专业 人 才 培 养 模式 有 研究 并 且 有 过 丰富 
的 实践 经 验 的 高 职高 专 院 校 进行 了 较 长 时 间 的 研讨 和 调研 , 送 选 出 一 批 
富有 工程 实践 经 验 和 教学 经 验 的 “ 双 师 型 ?教师 ,合力 编写 了 该 系列 适用 
于 高 职高 专 计算 机 相关 专业 的 教材 。 

本 系列 教材 是 以 任务 驱动 .案例 教学 为 核心 ,以 项 目 开 发 为 主线 而 编 
写 的 。 我 们 研究 分 析 了 国内 外 先进 职业 教育 的 教改 模式 、 教 学 方法 和 教 
材 特色 ,消化 吸收 了 很 多 优秀 的 经 验 和 成 果 , 以 培养 技术 应 用 型 人 才 为 目 
标 ,以 企业 对 人 才 的 需要 为 依据 ,将 基本 技能 培养 和 主流 技术 相 结合 ， 
证 该 系列 教材 重点 突出 、 主 次 分 明 、 结 构 合理 ,衔接 紧凑 。 其 中 的 每 本 教 
材 都 侧重 于 培养 学 生 的 实战 操作 能 力 ,使 学 、 思 , 练 相 结合 , 旨 在 通过 项 目 
实践 ,增强 学 生 的 职业 能 力 , 并 将 书本 知识 转化 为 专业 技能 。 


一 、 教 材 编写 思想 


本 系列 教材 以 案例 为 中 心 , 以 技能 培养 为 目标 ,围绕 开发 项 目 所 用 到 
的 知识 点 进行 讲解 ,并 附 上 相关 的 例题 来 帮助 读者 加 深 理解 。 
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在 系列 教材 中 采用 了 大 量 的 案例 ,这 些 案例 紧密 地 结合 教材 中 介绍 的 各 个 知识 点 ,内 
容 循序 渐进 .由 浅 入 深 , 在 整体 上 体现 了 内 容 主 导 、 实 例 解析 、 以 点 带 面 的 特点 ,配合 课程 
采用 以 项 目 设计 贯穿 教学 内 容 的 教学 模式 。 


二 、 从 书 特色 


本 系列 教材 体现 了 工学 结合 的 教改 思想 ,充分 结合 目前 的 教改 现状 ,突出 项 目 式 教学 
改革 的 成 果 , 着 重 打造 立体 化 精品 教材 。 具 体 特色 包括 以 下 方面 。 

(1) 参照 和 吸纳 国内 外 优秀 计算 机 专业 教材 的 编写 思想 ,采用 国内 一 线 企 业 的 实际 
项 目 或 者 任务 ,以 保证 该 系列 教材 具有 更 强 的 实用 性 ,并 与 理论 内 容 有 很 强 的 关联 性 。 

(2) 准确 把 握 高 职高 专 计算 机 相关 专业 人 才 的 培养 目标 和 特点 。 

(3) 每 本 教材 都 通过 一 个 个 的 教学 任务 或 者 教学 项 目 来 实施 教学 ,强调 在 做 中 学 .学 
中 做 ,重点 突出 技能 的 培养 ,并 不 断 拓 展 学 生 解 决 问题 的 思路 和 方法 ,以 便 培养 学 生 未 来 
在 就 业 岗位 上 的 终身 学 习 能 力 。 

(4) 借鉴 或 采用 项 目 驱动 的 教学 方法 和 考核 制度 ,突出 计算 机 技术 人 才 培 养 的 先进 
人 性、 实践 性 和 应 用 性 。 

(5) 以 案例 为 中 心 ,以 能 力 培养 为 目标 ,通过 实际 工作 的 例子 来 引入 相关 概念 ,尽量 

合 学 生 的 认 知 规律 。 

(6) 为 了 便于 教师 授课 和 学 生 学 习 , 清 华 大 学 出 版 社 网 站 (www. tup. com. cn) 免 费 
提供 教材 的 相关 教学 资源 。 

当前 ,高 职高 专 教育 正 处 于 新 一 轮 教 学 深度 改革 时 期 ,从 专业 设置 .课程 体系 建设 到 
教材 建设 ,依然 有 很 多 新 课题 值得 我 们 不 断 研 究 。 和 希望 各 高 职高 专 院 校 在 教学 实践 中 积 
极 提出 本 系列 教材 的 意见 和 建议 ,并 及 时 反馈 给 我 们 。 清 华 大 学 出 版 社 将 对 已 出 版 的 教 
材 不 断 地 进行 修订 并 使 之 更 加 完善 ,以 提高 教材 质量 ,完善 教材 服务 体系 ,继续 出 版 更 多 
的 高 质量 教材 ,从 而 为 我 国 的 职业 教育 贡献 我 们 的 微薄 之 力 。 
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目前 , HTML5 和 CSS3 已 成 为 Web 应 用 开发 中 的 热门 技术 ， 
HTML5 和 CSS3 不 仅 是 两 项 新 的 Web 技术 标准 ,更 代表 了 HTML 和 
CSS 技术 的 发 展 趋势 ,是 Web 开发 领域 的 一 次 重大 改变 。HTML5 具有 
便捷 的 描述 性 标签 、 良 好 的 多 媒体 支持 、 强 大 的 Web 应 用 、 先 进 的 选择 
器 、 精 美的 视觉 效果 方便 的 操作 、 跨 文档 的 消息 通信 客户 端的 方便 存储 
等 诸多 优势 。HTML5 的 突出 优点 是 该 技术 可 以 进行 跨 平台 使 用 。CSS3 
是 CSS 技术 的 升级 版 本 ,CSS3 语言 开发 是 朝 着 模块 化 方向 发 展 的 。 
CSS3 中 可 以 使 用 新 的 选择 器 和 属性 ,而 且 可 以 很 简单 地 设计 出 许多 理想 
的 展示 效果 。 

本 书 具 有 以 下 特色 和 创新 。 

(1) 编者 充分 调研 了 HTML5 .CSS3 新 技术 的 实际 应 用 情况 ,精心 挑 
选 教学 案例 。 本 书 开 发 前 期 对 HTMIL5、CSS3 新 技术 在 网 页 中 的 实际 应 
用 情况 做 了 大 量 细致 的 调研 工作 ,经 过 多 次 筛选 .优化 和 简化 ,最 终 形成 
了 50 多 个 典型 教学 案例 ,这 些 教学 案例 全 部 来 自 于 真实 网 站 ,代表 了 网 
页 应 用 设计 的 实际 需求 和 最 新 水 平 。 

(2) 全 书 合 理 选取 教学 内 容 ,科学 设置 教学 单元 。 让 读者 从 网 页 设 
计 实 际 应 用 的 角度 理解 HTML5 和 CSS3 的 新 元 素 和 新 功能 ,而 不 是 过 
于 注重 学 习 HTML5 和 CSS3 理论 知识 。 同 时 ,本 书 遵循 学 习 者 的 认 知 
规律 ,将 基于 HTML5 十 CSS3 的 网 页 应 用 设计 分 为 10 个 单元 。 

(3) 全 书 充分 考虑 教学 实施 的 实际 需求 ,每 个 教学 单元 面向 教学 全 
过 程 合理 设置 了 6 个 教学 环节 : 知识 必 备 一 引导 训练 一 同步 训练 一 技术 
进 阶 二 问题 探究 王 单元 习题 。 书 中 将 网 页 设计 的 相关 理论 知识 分 层次 进 
行 分 析 与 呈现 ,将 网 页 设计 技能 的 训练 分 阶段 实施 ,充分 满足 不 同 专业 、 
不 同 层次 学 习 者 学 习 网 页 设计 知识 和 训练 网 页 设计 技能 的 需求 。 全 书 还 
提供 了 500 多 道 习题 ,让 学 习 者 通过 大 量 的 练习 进一步 加 深 对 HTML5、 
CSS3 ,网 页 设计 相关 知识 的 理解 ,从 而 提升 网 页 设计 的 操作 技能 。 

(4) 全 书 围绕 网 页 应 用 的 实际 需要 来 设计 具有 很 强 操 作 性 的 任务 。 
采用 “任务 驱动 、 精 讲 多 练 、 理 论 实践 一 体 化 ”的 教学 方法 ,全 方位 促进 基 
于 HTML5 十 CSS3 网 页 应 用 设计 能 力 的 提升 。 注 重 引 导 学 习 者 在 完成 
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各 个 设计 任务 的 过 程 中 ,逐步 理解 HTML5 和 CSS3 的 新 功能 和 新 特点 ,循序 渐进 地 学 会 
HTML5 和 CSS3 的 实际 应 用 ,从 而 熟练 掌握 网 页 设计 的 方法 和 具备 网 页 设计 的 能 力 。 

(5) 本 书 创 新 了 教材 的 结构 和 呈现 形式 ,采用 纸 质 教材 十 电子 书 相 结合 的 方式 。 由 
于 纸 质 教材 篇 幅 的 限制 ,同时 要 保证 教学 内 容 的 系统 性 ,部 分 内 容 在 纸 质 教材 中 只 列 出 主 
干 内 容 , 完 整 内 容 通 过 扫描 二 维 码 可 以 在 线 浏览 ,各 单元 的 习题 也 是 以 在 线 浏览 方式 
提供 。 

(6) 本 书 配套 教学 资源 丰富 。 教 学 单元 设计 教学 流程 设计 、 网 页 任务 设计 教学 案 
例 及 素材 .电子 教 稿 等 教学 资源 一 应 俱全 ,力求 做 到 想 师 生 之 所 想 , 急 师 生 之 所 急 。 

本 书 由 湖南 铁道 职业 技术 学 院 的 陈 承 欢 . 颜 珍 平 老师 ,包头 轻 工 职业 技术 学 院 的 韩 炮 
坤 老师 共同 编写 , 颜 说 和 、 谢 树 新 . 吴 献 文 .省 素 华 . 林 保 康 . 王 欢 燕 , 张 丹 . 王 姿 . 斐 来 芝 . 潘 
玫 玫 、 郭 外 萍 、 侯 伟 . 张 丽 芳 等 多 位 老师 也 参与 了 教材 的 编写 。 

由 于 编者 水 平 有 限 , 书 中 难免 存在 下 漏 之 处 , 敬 请 各 位 专家 和 读者 批评 .指正 。 编 者 
的 QQ 为 1574819688 ,需要 相关 资源 的 读者 可 通过 QQ 与 编者 联系 。 


编 者 
2018 年 2 月 


教学 设计 


1. 教学 单元 设计 


单元 序号 单元 名 称 建议 课时 | 建议 考核 分 值 





单元 1 站 点 与 网 页 的 创建 4 5 





单元 2 网 页 中 文本 与 段落 的 应 用 设计 





单元 3 网 页 中 图 像 与 背景 的 应 用 设计 





单元 4 网 页 中 列表 与 表格 的 应 用 设计 





单元 5 网 页 中 超 链接 与 导航 栏 的 应 用 设计 








单元 7 网 页 中 音频 与 视频 的 应 用 设计 





单元 8 网 页 中 图 形 绘制 与 操作 的 应 用 设计 





单元 9 网 页 中 特效 与 交互 的 应 用 设计 








8 
6 
6 
6 
单元 6 网 页 中 表单 与 控件 的 应 用 设计 6 10 
4 
6 
8 
6 


单元 10 | 网 页 中 元 素 与 整体 布局 的 应 用 设计 
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2. 教学 流程 设计 




















教学 环节 序号 | 教学 环节 名 称 说 明 
知识 必 备 对 HTML5、CSS3、 网 页 设计 相关 的 理论 知识 进行 
~ 梳理 ,为 网 页 的 应 用 设计 提供 方法 指导 和 知识 支持 
F 引导 训练 “| 引导 学 习 者 一 步 一 步 地 完成 网 页 的 应 用 设计 任务 
， 参照 引导 训练 的 方法 ,学 习 者 自主 完成 类 似 的 网 页 
和 同步 训练 | 应 用 设计 任务 
对 应 用 HTML5、CSS3 设计 网 页 的 典型 方法 和 技 
技术 进 阶 | 术 要 点 进行 分 析 
5 问题 探究 对 网 页 设计 与 制作 方面 的 关键 问题 进行 专门 分 析 
与 阐述 
6 单元 习题 通过 大 量 的 习题 进一步 加 深 对 HTML5、CSS3、 网 
页 设计 相关 知识 的 理解 ,提升 网 页 设计 的 操作 技能 








单元 1 站 点 与 网 页 的 创建 pp 1 


【知识 必 备 了 … 1 
【引导 训练 了 … … ee 4 
任务 1-1 创建 “单元 1” 站 点 并 浏览 网 页 ……………… 4 
任务 1-1-1 创建 本 地 站 点 “单元 1”…… ee 4 
任务 1-1-2 认识 Dreamweaver CC 的 工作 界面 ……… 6 
任务 1-1-3 打开 与 浏览 网 页 文档 0101. html ， 了 
任务 1-2 认 知 HTML5 的 典型 标记 和 结构 标签 … 
任务 1-2-1 分 析 HTML 代码 的 组 成 结构 ……: 本 
任务 1-2-2 认 知 HTML5 中 典型 的 标记 方法 … 17 
任务 1-2-3 认 知 HTML5 主要 的 结构 标签 … … 17 
“ 洒 1-3 ”打开 并 浏览 网 页 0103. html : 和 
ee … 要 
单元 2 网 页 中 文本 与 段落 的 应 用 设计 pe 22 
【知识 必 备 】… es 99 
【引导 训练 】……… . 
任务 2-1 制作 阿坝 概况 的 文本 网 页 - 
任务 2-1-1 建立 站 点 及 其 目录 结构 …………………… 38 
任务 2-1-2 创建 与 保存 网 页 文档 0201. html ， “40 
任务 2-1-3 设置 网 页 的 首选 项 … 四 
任务 2-1-4 设置 页 面 的 整体 属性 … 
任务 2-1-5 在 网 页 中 输入 文字 ………… 四 
任务 2-1-6 输入 与 编辑 网 页 中 的 文本 …………………… 49 
性 荔 奖 让 7 阁 疾 他 网 商议 未 人 i 















录 
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任务 2-1-8 设置 超 链接 与 浏览 网 页 效果 … Or 

任务 2-1-9 ”在 [代码 ] 视 图 中 查看 CSS 代码 和 HTML 代码 … 
任务 2-2 使 用 CSS 美 化 文本 标题 和 文本 段落 . rs 
【同步 训练 】. RR PT | 
任务 2-3 制作 介绍 九寨 沟 概 况 的 文本 网 页 
【技术 进 阶 】…… 
【问题 探究 】…… . 
【单元 习题 】 ,67 


单元 3 ”网 页 中 图 像 与 背景 的 应 用 设计 68 









【知识 必 备 】… 
【引导 训练 】… . 了 
任务 3-1 制作 介绍 九寨 沟 景 区 景点 的 图 文 混 排 网 页 ee 
任务 3-1-1 使 用 [管理 站 点 】 对 话 框 创建 站 点 "单元 3 pp 75 
任务 3-1-2 ”应 用 【文件 了 面板 新 建 网 页 0301. html 
任务 3-1-3 设置 页 面 的 背景 图 像 … A ee 

任务 3-1-4 在 网 页 中 输入 所 需 的 文本 内 容 与 设置 文本 格式 … 
任务 3-1-5 插入 图 像 与 设置 图 像 属 性 … ee 
任务 3-1-6 在 “代码 ?视图 中 查看 CSS 代码 和 HTML 代码 … 
任务 3-2 使 用 CSS 美 化 网 页 文本 与 图 片 ， i 
任务 3-3 ”创建 多 张 图 片 并 行 排列 的 网 页 0303. html 
【同步 训练 】… 有 于 
任务 3-4 在 网 页 中 设置 图 片 与 背景 属性 PN 

任务 3-5 创建 图 文 混 排 的 网 页 0305. html  … 

pi es 
单元 4 网 页 中 列表 与 表格 的 应 用 设计 pp 99 
【知识 必 备 】… 
【引导 训练 了 … 人 2 
任务 4-1 创建 以 项 目 列表 形式 表现 新 闻 标题 的 网 页 1105 
任务 4-2 创建 以 项 目 列表 形式 表现 图 文 按钮 的 网 页 … ee 109 
任务 4-3 创建 应 用 表格 存放 数据 的 网 页 ………………… 
任务 4-4 创建 包含 个 性 化 表格 的 网 页 - 
任务 4-5 创建 项 目 列表 为 主 的 旅游 攻略 标题 网 页 …………………………… 122 
任务 4-6 创建 包含 5 行 3 列表 格 的 网 页 pp 123 




















【问题 探究 】… 


单元 5 网 页 中 超 链接 与 导航 栏 的 应 用 设计 pp 


【知识 必 备 了 … 
【引导 训练 】… Ss 
任务 5-1 设置 网 页 中 导航 栏 的 超 链接 属性 … 
任务 5-2 制作 包含 横向 主导 航 栏 的 网 页 
任务 5-3 制作 包含 纵向 栏目 导航 栏 的 网 页 ， 
任务 5-4 ”创建 包含 图 像 热点 链接 的 网 页 … 
【同步 训练 】… 
任务 5-5 创建 包含 顶部 横向 导航 栏 的 网 页 ， 


【技术 进 阶 】)… 
【问题 探究 了 … 


单元 6 ”网 页 中 表单 与 控件 的 应 用 设计 


【知识 必 备 了 … 
引导 训练 了 … a 
任务 6-1 在 网 页 中 添加 表单 及 表单 控件 … 
任务 6-2 创建 用 户 注册 的 表单 网 页 
【同步 训练 】… 


任务 6-3 ”创建 用 户 登录 的 表单 网 页 eeeeeeeeee 
任务 6-4 ”创建 用 户 留 言 反馈 网 页 . A TT 


【技术 进 阶 】… 
【问题 探究 】… 


单元 7 网 页 中 音频 与 视频 的 应 用 设计 .nen 


【知识 必 备 】… 
【引导 训练 】… 


任务 7-1 设计 基于 HTML5 的 网 页 音乐 播放 器 之 一 … 
任务 7-2 设计 基于 HTML5 的 网 页 视频 播放 器 之 一 … 


【同步 训练 卫 … 


任务 7-3 设计 基于 HTML5 的 网 页 音乐 播放 器 之 二 
任务 7-4 设计 基于 HTML5 的 网 页 视频 播放 器 之 二 pe 





任务 5-6 ”创建 包含 多 种 不 同形 状 图 像 链接 的 网 页 ee 








… 141 
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【问题 探究 】… 


单元 8 网 页 中 图 形 绘制 与 操作 的 应 用 设计 


【知识 必 备 】… 
[引导 训练 】… 本 
任务 8-1 网 页 中 应 用 纯 CSS 绘制 各 种 规则 图 形 … 


任务 8-2 网 页 中 应 用 纯 CSS 绘制 各 种 特色 图 形 pp 
任务 8-3 网 页 中 应 用 canvas 元 素 绘制 各 种 图 形 和 文字 … ee 


任务 8-4 ”网 页 中 绘制 菊花 图 形 … 
【同步 训练 】…… 
任务 8-5 ”网 页 中 绘制 阴阳 图 和 五 角 星 


任务 8-6 ”网 页 中 绘制 多 种 图 形 和 图 片 ee 
1 00 
单元 9 网 页 中 特效 与 交互 的 应 用 设计 ee 


【技术 进 阶 )…… 


【引导 训练 】)…… 


任务 9-2 sig 


任务 9-3 网 页 中 制作 圆 角 按钮 和 圆 角 图 片 


任务 9-4 设计 网 页 中 的 贺 形 导航 按钮 ee 
任务 9-5 网 页 中 实现 搜索 框 聚焦 变 长 的 效果 ee 


任务 9-6 网 页 中 应 用 CSS 实现 超 酷 导航 菜单 … 
任务 9-7 网 页 中 实现 仿 Office 风格 的 多 级 菜单 … 
任务 9-8 ”网 页 中 实现 图 片 拖 动 操作 … 
【同步 训练 】… 克 
任务 9-9 网 页 中 不 同 的 节假日 显示 不 同 的 问候 语 


【技术 进 阶 了 … 
【问题 探究 了 … 


单元 :条 ， 而 页 电 元 来 与 整体 布局 的 过 用 进香 ee 全 ennnna 辣 全 


【知识 必 备 了 … 
x 













性 努 gui0 网 页 中 机 建 下 柏 导 裔 亲 第 en 





200 


"… 206 





208 








任务 10-1 体验 网 页 的 不 同 布局 方式 ………… ee 

任务 10-2 创建 浮动 定位 2 列 式 布局 的 网 页 …………………e 281 

任务 10-3 ”创建 等 距 排列 的 4 列 式 布局 网 页 pp 289 

任务 10-4 ”创建 不 规则 布局 网 页 ……………… 

任务 10-5 ”创建 浮动 定位 2 列 规则 分 块 的 网 页 …… 2 

任务 10-6 ”创建 3 列 式 与 4 列 式 等 距 布局 的 网 页 pp 301 
【问题 探究 卫 区 302 








单元 1 站 点 与 网 页 的 创建 


制作 网 页 之 前 ,应 该 先 在 本 地 计算 机 磁盘 上 建立 一 个 站 点 。 站 点 提供 一 种 组 织 所 有 
与 本 网 站 有 关联 的 网 页 文档 的 方法 ,使 用 站 点 对 网 页 文档 、 样 式 表 文 件 、 网 页 素材 进行 统 
一 管理 。 创 建站 点 后 ,对 网 页 的 操作 都 是 在 站 点 统一 监控 之 下 进行 。 如 果 使 用 了 外 部 文 
件 ,Dreamweaver 就 会 自动 检测 并 提示 是 否 将 外 部 文件 复制 到 站 点 内 ,以 保持 站 点 的 完 
整 性 。 如 果 某 个 文件 夹 或 文件 重新 命名 ,系统 会 自动 更 新 所 有 的 链接 ,以 保证 原 有 链接 关 
系 的 正确 性 。 


【知识 尾 备 】 


1. HTMLS 印象 


HTML5 是 万 维 网 的 核心 语言 ,HTML5 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 
公布 。2012 年 12 月 17 日 ,万 维 网 联盟 (W3C) 正 式 宣布 凝结 了 大 量 网 络 工 作者 心血 的 
HTML5 规范 已 经 正式 定稿 。 根 据 W3C 的 发 言 稿 称 :“HTML5 是 开放 的 Web 网 络 平 
台 的 奠基 石 。” 

2013 年 5 月 6 日 ,HTML5.1 正式 草案 公布 。 该 规范 定义 了 第 五 次 重大 版 本 ,第 一 
次 要 修订 万 维 网 的 核心 语言 : 超 文本 标记 语言 (HTML)。 在 这 个 版 本 中 ,新 功能 不 断 推 
出 ,以 帮助 Web 应 用 程序 的 开发 者 努力 提高 新 元 素 互 操作 性 。 

支持 HTML5 的 浏览 器 包括 Chrome( 谷 歌 浏览 器 )、Firefox( 火 狐 浏览 器 ) .IE9 及 其 
更 高 版 本 、Safari、Opera 等 ;国内 的 傲游 浏览 器 (Maxthon), 以 及 基于 IE 或 Chromium 
(Chrome 的 工程 版 或 称 实验 版 ) 所 推出 的 360 浏览 器 .搜狗 浏览 器 .QQ 浏览 器 ,猎豹 浏览 
器 等 国产 浏览 器 同样 具备 支持 HTML5 的 能 力 。 


2. CSS3 印象 


CSS 是 Cascading Style Sheet 的 缩写 ,可 译 为 层 释 样 式 表 或 级 联 样式 表 , 是 一 组 格式 
设置 规则 ,用 于 控制 Web 页 面 的 外 观 。 

在 网 页 制作 时 采用 层 县 样式 表 技 术 , 可 以 有 效 地 对 页 面 的 布局 .字体 .颜色 .背景 和 其 
他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 的 代码 做 一 些 简单 的 修改 ,就 可 以 改变 同一 页 
面 的 不 同 部 分 ,或 者 不 同 网 页 的 外 观 和 格式 。CSS3 是 CSS 技术 的 升级 版 本 ,CSS3 语言 
开发 是 朝 着 模块 化 发 展 的 。CSS3 将 完全 向 后 兼容 ,网 络 浏览 器 也 将 继续 支持 CSS2 。 
CSS3 的 主要 影响 是 可 以 使 用 新 的 可 用 的 选择 器 和 属性 ,这 些 将 允许 实现 新 的 设计 效果 
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(例如 渐变 和 交互 ) ,而 且 可 以 很 简单 地 设计 出 新 的 设计 效果 (例如 使 用 分 栏 ) 。 
3. JavaScript 印象 


JavaScript 是 一 种 直译 式 脚本 语言 ,可 以 和 HTML 语言 混合 在 一 起 使 用 ,用 来 实现 
在 一 个 Web 页 面 中 与 用 户 交互 的 作用 。 

JavaScript 是 一 种 动态 类 型 、. 弱 类 型 .基于 原型 的 语言 ,内 置 支持 类 型 。 它 是 一 种 广 
泛 用 于 客户 端的 脚本 语言 ,在 HTML 网 页 上 使 用 ,用 来 给 HTML 网 页 增加 动态 功能 。 
它 的 解释 器 被 称 为 JavaScript 引擎 ,为 浏览 器 的 一 部 分 。 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 脚本 语言 。JavaScript 是 一 种 轻 量 级 的 编 
程 语言 ,JavaScript 插入 HTML 页 面 后 ,可 由 所 有 当前 的 流行 浏览 器 执行 。 使 用 它 的 目 
的 是 与 HTML 超 文 本 标记 语言 一 起 实现 网 页 中 的 动态 交互 功能 。 通 过 嵌入 或 调用 
JavaScript 代码 在 标准 的 HTML 语言 中 实现 其 功能 。 它 与 HTML 标签 结合 在 一 起 , 弥 
补 了 HTML 语言 的 不 足 ,JavaScript 使 得 网 页 变 得 更 加 生动 。 

JavaScript 的 基本 语法 与 C 语言 类 似 ,但 运行 过 程 中 时 不 需要 单独 编译 ,而 是 逐 行 解 
释 执行 ,运行 快 。JavaScript 具有 路 平台 性 ,与 操作 环境 无 关 ,只 依赖 于 浏览 器 本 身 , 对 于 
支持 JavaScript 的 浏览 器 就 能 正确 执行 。 

4. Bootstrap 印象 

Bootstrap 是 基于 HTML5 CSS3 ,JavaScript 开发 的 , 它 在 jQuery 的 基础 上 进行 了 更 
为 个 性 化 的 完善 ,形成 一 套 自己 独 有 的 网 站 风格 ,并 兼容 大 部 分 jQuery 插件 。 

Bootstrap 是 目前 很 受 欢迎 的 前 端 框架 , 它 简洁 灵活 ,使 得 Web 开发 更 加 快捷 。 它 由 
Twitter 的 设计 师 Mark Otto 和 Jacob Thornton 合作 开发 ,是 一 个 CSS/HTML 框架 。 
Bootstrap 提供 了 优雅 的 HTML 和 CSS 规范 ,一 经 推出 后 颇 受 欢迎 ,一 直 是 GitHub 上 的 
热门 开源 项 目 。 


5. HTML 文档 的 组 成 元 素 


一 个 完整 的 HTML 文档 由 HTML 标签 与 各 种 网 页 元 素 组 成 的 ,HTML 标签 的 功 
能 是 逻辑 性 地 描述 网 页 的 结构 ,网 页 元 素 指标 题 、 段 落 、 图 像 , 动 画 、 视 频 等 各 种 对 象 。 


6. HTML 代码 应 遵循 的 语法 规则 


HTML 代码 应 遵循 以 下 语法 规则 。 
(1) HTML 文档 以 纯 文本 形式 存放 ,扩展 名 为 ". html" 或 “. htm”。 
(2) HTML 文档 中 标签 采用 “二 ”与 二 ”作为 分 割 字 符 ,起 始 标签 的 一 般 形 式 如 下 : 


< 标签 名 称 属性 名 称 = 对 应 的 属性 值 ...> 

结束 标签 的 一 般 形式 如 下 : 

</ 标 签名 称 > 

包含 在 起 始 标签 与 结束 标签 之 间 的 就 是 网 页 对 象 。 
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(3) HTML 标签 及 属性 不 区 分 大 小 写 , 例 如 过 HTML 之 和 过 html 之 是 相同 的 标签 ， 
但 一 般 要 求 HTML 标签 为 小 写字 母 。 

(4) 大 多 数 HTML 标签 可 以 幅 套 ,但 不 能 交叉 ,各 层 标签 是 全 包容 关系 。 

(5) HTML 文档 一 行 可 以 书写 多 个 标签 ,一 个 标签 也 可 以 分 多 行书 写 , 不 用 任何 续 
行 符号 ,显示 效果 相同 。 但 是 HTML 标签 中 的 一 个 单词 不 能 分 开 两 行书 写 。 

(6) HTML 源 代 码 中 的 换行 、 回 车 符 和 多 个 连续 空格 在 浏览 时 都 是 无 效 的 ,浏览 网 
页 时 ,会 自动 忽略 文档 中 的 换行 符 、 回 车 符 、 空 格 ,所 以 在 文档 中 输入 的 回 车 符 , 并 不 意味 
着 在 浏览 器 中 将 看 到 不 同 的 段落 。 当 需要 在 网 页 中 插入 新 的 段落 时 ,必须 使 用 分 段 标签 
王 p 二 到/p> , 它 可 以 将 标签 后 面 的 内 容 另 起 一 段 。 换 行 可 以 使 用 一 br 之 标签 ,需要 多 个 
空格 ,可 以 使 用 多 个 “&.nbsp;” 转 义 符号 。 

(7) 网 页 中 所 有 的 显示 内 容 都 应 该 受 限 于 一 个 或 多 个 标签 ,不 能 存在 游离 于 标签 之 
外 的 文字 或 图 像 等 ,以 免 产 生 错误 。 

(8) 对 于 浏览 器 不 能 分 辩 的 标签 可 以 忽略 ,不 显示 其 中 的 对 象 。 


7. HTML 标签 的 类 型 


在 HTML 中 用 于 描述 功能 的 符号 称 为 “标签 ”, 它 是 用 来 控制 文字 、 图 形 等 显示 方式 
的 符号 ,例如 html、head、body 等 。 标 签 在 使 用 时 必须 用 “二 二” 插 起 来 。 

在 查看 HTML 源 代码 或 书写 HTML 代码 时 ,经 常会 遇 到 三 种 形式 的 HTML 标签 。 

(1) 不 带 属性 的 双 标签 。 

< 标签 名 称 > 网 页 内 容 < /标签 名 称 > 

网 页 中 的 标题 .文字 的 字形 等 都 是 这 种 形式 ,例如 : 二 strong 二 长 江 三 峡 
一 /Strong 二 。 

(2) 带 有 属性 的 双 标签 。 


< 标签 名 称 属性 名 称 = "对 应 的 属性 值 " ...> 网 页 对 象 < /标签 名 称 > 


这 种 形式 的 标签 最 常用 ,功能 更 强大 ,各 属性 之 间 无 先后 次 序 , 属 性 也 可 以 省 略 , 取 其 
默认 值 。 例 如 : 二 hl align= 王 "center" 二 阿坝 概况 二 /hl 二 。 

(3) 单 标签 。 

< 标签 名 称 > 


单 标签 只 有 起 始 标签 没有 结束 标签 ,这 类 标签 并 不 多 见 ,经 常 看 到 的 可 能 是 二 br 二 、 
<hr>。 





8. 关于 doctype 


doctype 是 一 种 标准 通用 标记 语言 的 文档 声明 类 型 , 它 的 目的 就 是 告诉 标准 通用 标 
记 语 言 解析 器 ,应 该 使 用 什么 样 的 文档 类 型 定义 。 
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【引导 训练 】 
任务 个 1 创建 “单元 1” 站 点 并 浏览 网 页 


【任务 梅 迹 】 


任务 1-1-1 创建 本 地 站 点 “单元 1” 
任务 1-1-2 认识 Dreamweaver CC 的 工作 界面 
任务 1-1-3 打开 与 浏览 网 页 文档 0101. html 


【任务 银 施 】 


任务 1-1-1 创建 本 地 站 点 “单元 1” 
1. 创建 所 需 的 文件 夹 与 复制 所 需 的 资源 


在 本 地 硬盘 (例如 下 盘 ) 中 创建 一 个 文件 夹 “”HTML5 十 CSS3 网 页 设计 实例 ”, 在 该 文 
件 夹 中 创建 子 文件 夹 Unit01, 然 后 在 文件 夹 Unit01 中 创建 子 文件 夹 0101, 再 在 该 子 文件 
夹 0101 中 创建 css images 等 子 文件 夹 , 且 将 所 需 的 素材 复制 到 对 应 的 子 文件 夹 中 。 


2. 启动 Dreamweaver CC 


在 Windows 的 [开始 ] 菜 单 中 选择 【程序 】->Adobe Dreamweaver CC 菜单 命令 , 即 可 启动 
Dreamweaver CC。Dreamweaver CC 2017 启动 成 功 后 ,会 出 现 如 图 1-1 所 示 的 初始 界面 。 





1-1] Dreamweaver CC 2017 的 初始 界面 
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3. 创建 本 地 站 点 


创建 一 个 名 称 为 “单元 1” 的 本 地 站 点 ,站 点 文件 夹 为 “Unit01\0101”。 

1) 打开 【站 点 设置 对 象 ] 对 话 框 

在 Dreamweaver CC 的 主 界面 的 菜单 中 选择 【站 点 】>【 新 建站 点 命令 ,如 图 1-2 所 
示 , 打 开 【 站 点 设置 对 象 ] 对 话 框 ,如 图 1-3 所 示 。 





] 获取 (G) Ctrl+Akt+D 
| MO Ctrl+Alt+Shift#D 
上 传 (P) Ctrl+Shift+U 
存 国 (0) Ctrl+Alt+Shift+U 








图 1-2 “新 建站 点 ”菜单 命令 


站 点 设置 对 象 未 命名 站 点 2 X 





图 1-3 【站 点 设置 对 象 ] 对 话 框 


2) 在 【站 点 设置 对 象 ] 对 话 框 中 设置 本 地 站 点 信息 

在 【站 点 设置 对 象 ] 对 话 框 的 “站 点 名 称 ” 文 本 框 中 输入 站 点 名 称 “单元 1”, 在 “本 地 站 
点 文件 夹 "文本 框 中 输入 完整 的 路 径 名 称 "E:XHTML5 十 CSS3 网 页 设计 实例 \Unit01\”， 
如 图 1-4 所 示 。 也 可 以 单 击 右 侧 的 [浏览 文件 夹 ] 按 钮 图 ,在 弹出 的 【选择 根 文件 夹 ] 对 话 
框 中 选择 具体 位 置 ,然后 单 击 [ 打 开 J 按 钮 。 

3) 保存 创建 的 站 点 

在 【站 点 设置 对 象 ] 对 话 框 中 单 击 【保存 】 按 钮 ,保存 创建 的 站 点 ,更 新 站 点 缓存 。 
此 时 在 [文件 ] 面 板 中 可 以 看 到 新 创建 的 本 地 站 点 “单元 1” 中 的 文件 夹 和 文件 ,如 图 1-5 
所 示 。 
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站 点 设置 对 铺 单元 1 x 





图 1-4 在 【站 点 设置 对 象 ] 对 话 框 中 设置 本 地 站 点 信息 





图 1-5 新 创建 的 本 地 站 点 “单元 1” 中 的 文件 夹 和 文件 


任务 1-1-2 认识 Dreamweaver CC 的 工作 界面 
Dreamweaver CC 的 工作 界面 如 图 1-6 所 示 。 
1. 认识 Dreamweaver CC 的 标题 栏 
标题 栏 用 于 显示 网 页 文档 的 路 径 和 名 称 。 
2. 认识 Dreamweaver CC 的 菜单 栏 


Dreamweaver CC 的 菜单 栏 包含 9 类 菜单 :【 文 件 【 编 辑 1【 查 看 ]【 插 入】 【工具 】、 
【查找 】 工 站 点 】 民 窗口 3 和 【帮助 】, 如 图 1-6 所 示 。 菜 单 按 功 能 的 不 同 进行 了 合理 的 分 类 ， 
使 用 起 来 非常 方便 。 

除了 菜单 栏 外 ,Dreamweaver CC 还 提供 了 多 种 快捷 菜单 ,可 以 利用 它们 方便 地 实现 
相关 操作 。 


3. 认识 Dreamweaver CC 的 [文档] 工具 栏 


【文档 工具 栏 中 包含 用 于 切换 文档 窗口 视图 的 【代码 】【 拆 分 】【 设 计 】【 实 时 视图 】 
功能 按钮 ,如 图 1-7 所 示 。 
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菜单 栏 文档 窗口 【文档 】 工 具 栏 面板 组 





1 <!DOCTYPE html> 
2v <html> 
<head> 
<meta charset="utf-8"> 


<title> 携 程 底 行 网 </title> 
ink href="css/commo 


<Linl 


"> 
><img src="images/01,jpe" 


section> 
<nav> 
<ul class="nav-list"> 


标签 选择 器 【文件 】 面 板 
图 1-6 Dreamweaver CC 的 界面 布局 与 组 成 


图 1-7 【文档 3 工具 栏 


4. 认识 Dreamweaver CC 的 [标准] 工具 栏 


【标准 ] 工 具 栏 中 包含 网 页 文档 的 基本 操作 按钮 ,例如 [新 建 ]【 打 开 】【 保 存 1【 全 部 
保存 【打印 代码 ]【 剪 切 }【 复 制 ]【 粘 贴 ] 等 按钮 ,如 图 1-8 所 示 。 


图 1-8 【标准 ] 工 具 栏 


提示 : 如 果 【 标 准 】〗 工 具 栏 处 于 隐藏 状态 ,在 【窗口 】 下 拉 菜 单 中 指向 【工具 栏 】 选 项 ,在 
该 级 联 菜单 中 选择 【标准 了 菜单 ,如 图 1-9 所 示 , 即 可 显示 【标准 】 工 具 栏 。 





1-9 显示 [标准 ] 工 具 栏 的 菜单 项 
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5. 认识 Dreamweaver CC 的 [文档] 窗口 


【文档 了 窗口 也 称 为 文档 编辑 区 ,该 窗口 所 显示 的 内 容 可 以 是 代码 、 网 页 ,或 者 两 者 的 
共同 体 。 在 【设计 视图 ] 中 ,【 文 档 ] 窗 口中 显示 的 网 页 近似 于 浏览 器 中 显示 情形 ;在 【代码 
视图 中 ,显示 当前 网 页 的 HTML 文档 内 容 ; 在 两 种 视图 共同 显示 的 界面 中 ,同时 满足 了 
上 述 两 种 不 同 的 设计 要 求 。 用 户 可 以 在 文档 工具 栏 中 单 击 【 代 码 】【 拆 分 或 者 [设计 ] 按 
钮 ,切换 窗口 视图 。 

Dreamweaver CC 还 提供 了 一 种 “实时 视图 ”, 实 时 视图 与 设计 视图 不 同 之 处 在 于 它 
提供 了 页 面 在 浏览 器 中 的 非 可 编辑 的 .逼真 的 呈现 外 观 。 


6. 认识 Dreamweaver CC 的 【插入 了 面板 


显示 [ 择 入] 面板 的 方法 是 : 选择 [窗口 >【 择 入 命令, 在 Dreamweaver CC 的 主 界 
面 的 右 侧面 板 区 域 将 显示 [插入] 面板 。 通 常情 况 下 会 显示 【插入 面板 中 的 HTML 类 
型 ,如 图 1-10 所 示 。 

在 Dreamweaver CC 的 【插入 了 面板 中 , 单 击 【插入 面板 的 IEIMEY “按钮 , 即 可 展 
开 “ 插 入 ”工具 类 型 列表 ,如 图 1-11 所 示 。 “插入 ?工具 主要 包括 HTML 民 表单 】 工 模板 】、 
【Bootstrap 组 件 ] 【jQuery Mobilel 【jQuery UD 和 【收藏 夹 ] 等 多 种 类 型 的 工具 栏 。 

利用 “插入 ”工具 栏 可 以 快速 插入 多 种 网 页 元 素 ,例如 Div、Image、Table、HTML5 
Video .Hyperlink \ 项 目 列表 和 列表 项 等 。 

在 如 图 1-11 所 示 的 [插入 工具 类 型 列表 中 选择 菜单 项 即 可 切换 不 同类 型 的 插入 工 
有 具 栏 。 在 该 列表 中 选择 [模板 ] 类 型 , 则 显示 [模板 ] 类 型 的 按钮 ,如 图 1-12 所 示 。 





图 1-10 【插入 ] 面 板 图 1-11 【插入 ] 工 具 的 类 型 ”图 1-12 【插入 了 面板 中 的 【模板 】 
工具 栏 按钮 
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7. 认识 Dreamweaver CC 的 [属性] 面板 


【属性 了 面板 用 于 查看 和 更 改 所 选取 的 对 象 或 文本 的 各 种 属性 ,每 个 对 象 有 不 同 的 属 
性 。【 属 性 面板 比较 灵活 , 它 随 着 选择 对 象 的 不 同 而 进行 改变 ,例如 当选 择 一 幅 图 像 ,【 属 
性 ] 面 板 上 将 出 现 该 图 像 的 对 应 属性 ,如 图 1-13 所 示 。 如 果 选 择 了 表格 , 则 [属性] 面板 会 
显示 对 应 表格 的 相关 属性 。 








图 1-13 【属性 ] 面 板 


提示 : 打开 【属性 面板 的 方法 : 在 Dreamweaver CC 主 界面 中 ,选择 菜单 中 的 [窗口 > 
【属性 ] 命 令 即 可 。 

折 党 [属性 面板 的 方法 : 双击 【属性 面板 左上 角 的 “属性 ”标题 名 称 ,就 会 折 党 [ 属 
性 ] 面 板 。〖【 属 性 面板 折 营 时 ,双击 “属性 ”标题 ,就 会 显示 完整 的 [属性 面板 。 


8. 认识 Dreamweaver CC 的 面板 组 


Dreamweaver CC 包括 多 个 面板 ,这 些 面板 都 有 不 同 的 功能 ,将 它们 过 加 在 一 起 便 形 
成 了 面板 组 。 面 板 组 主要 包括 【文件 面板 【插入 面板 【CSS 设计 器 了 面板 等 。 各 个 面 
板 可 以 打开 或 关闭 ,平常 没有 用 到 时 可 以 关闭 ,要 使 用 时 再 显示 出 来 ,这 样 可 以 充分 利用 
有 限 的 屏幕 空间 。 

提示 : 要 显示 面板 , 单 击 【窗口 菜单 选择 相应 的 命令 即 可 ,如 图 1-14 所 示 。 要 单独 
关闭 某 一 个 面板 ,在 对 应 面板 标题 位 置 右 击 ,打开 如 图 1-15 所 示 的 快捷 菜单 ,然后 选择 
【关闭 了 命令 即 可 。 


资源 (A) 

行为 (E) Shift+F4 
代码 检查 器 (D) Fo 
CSS 设计 器 (CO Shift+F11 
CSS 过 渡 效 果 (R) 

DOM(O) Ca+F7 
Extradt 


文件 (月 
国 和 0 Ca+F2 
jQuery Mobile 色 板 
结果 (R) > 
代码 片断 (N) Shift+F9 
扩展 00 > 
国 ; oo.nm 


1-14 【窗口 ] 荣 单 1-15 【关闭 了 面板 的 快捷 菜单 
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另外 ,双击 面板 的 标题 就 可 以 显示 或 折 营 面板 。 
查看 页 面 设计 的 整体 效果 时 ,可 以 直接 按 下 快捷 键 F4 或 者 选择 菜单 中 的 [窗口 > 
【隐藏 面板 ] 命 令 来 隐藏 全 部 面板 ,再 次 按 下 快捷 键 F4 则 可 以 重新 显示 全 部 面板 。 


9. 认识 Dreamweaver CC 的 [文件] 面板 


网 站 是 多 个 网 页 .图像 动画、 程序 等 文件 有 机 联系 的 整体 ,要 有 效 地 管理 这 些 文件 及 
其 联系 ,需要 有 一 个 有 效 的 工具 ,【 文 件 ] 面 板 便 是 这 样 的 工具 。 

打开 【文件 了 面板 的 方法 : 选择 [窗口 >【 文 件 ] 命 令 , 或 者 按 快捷 键 F8, 可 以 显示 [ 文 
件 ] 面 板 . 【文件 7 面板 的 组 成 如 图 1-16 所 示 ,在 该 面板 中 显示 了 当前 站 点 的 内 容 。 


站 点 列表 


文件 夹 


文件 
文件 信息 





图 1-16 【文件 ] 面 板 


【文件 了 面板 中 的 “站 点 列表 ? 列 出 了 Dreamweaver CC 中 定义 的 所 有 站 点 。 
10. 认识 Dreamweaver CC 的 标签 选择 器 


在 文档 窗口 底部 的 状态 栏 中 ,显示 环绕 当前 选 定 内 容 标签 的 层次 结构 , 单 击 该 层次 结 
构 中 的 任何 标签 ,可 以 选择 该 标签 及 网 页 中 对 应 的 内 容 。 在 标签 选择 器 还 可 以 设置 网 页 
的 显示 比例 ,如 图 1-17 所 示 。 


图 1-17 标签 选择 器 


任务 1-1-3 打开 与 浏览 网 页 文档 0101. html 


1. 打开 网 页 文档 0101. html 


在 Dreamweaver CC 主 窗口 中 ,选择 【文件 ->【 打 开 ] 菜 单 命令 ,弹出 如 图 1-18 所 示 
的 [打开] 对话 框 ,在 该 对 话 框 中 可 以 打开 多 种 类 型 的 文档 ,例如 HTML 文档 、JavaScript 
文档 .XML 文档 、 库 文档 ,模板 文档 等 。 在 【打开 对话 框 中 选择 文件 夹 “0101” 中 需要 打 
开 的 网 页 文档 0101. html, 然 后 单 击 【 打 开 ] 按 钮 即 可 。 

提示 : 在 Dreamweaver CC 中 打开 最 近 曾 打开 过 的 网 页 文档 的 方法 如 下 。 
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¢ ~ 个 目 < Unitol > 0101 v 局 | 瘦 夫 "0101" 忆 


组 织 ”新 建文 件 夫 E> me 


J images 


电线 四 全 0101html 























文件 名 (N): |0101.html ~| All Documents (htm;".html;* ~ 






































图 1-18 【打开 ] 对 话 框 


在 Dreamweaver CC 主 窗 口中 选择 菜单 【文件 】, 鼠 标 指 针 指向 【打开 最 近 的 文件 了】 茉 
单项 ,在 弹出 的 级 联 菜单 中 选择 需要 打开 的 文件 ,就 可 以 打开 最 近 编 辑 过 的 网 页 文档 。 如 
果 选 择 了 【启动 时 重新 打开 文档 命令 , 则 下 次 启动 Dreamweaver CC 后 将 自动 打开 上 次 
退出 时 处 于 打开 状态 的 文档 。 


2. 浏览 网 页 


在 Dreamweaver CC 主 窗口 中 浏览 网 页 的 方法 有 两 种 。 
(1) 选择 [文件 】->【 实 时 预览 ]->Google Chrome 菜单 命令 ,如 图 1-19 所 示 。 











1-19 浏览 网 页 的 菜单 命令 
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(2) 按 F12 快捷 键 。 
按 F12 快捷 键 浏 览 网 页 ,网 页 0101. html 的 浏览 效果 如 图 1-20 所 示 。 


百 = 口 x 








/D 汪 T 机 J 二 光 X 
C |@ 127.0.0.1:52286/preview/app/indexhtml 儿 女 | 晤 : 

















电话 预订 ”下载 客户 满 | 内 我 的 携程 


网 站 地 图 电脑 版 意见 反馈 
%2018 撞 程 旅行 











图 1-20 网 页 0101. html 的 浏览 效果 


3. 保存 网 页 文档 


保存 网 页 文档 的 方法 主要 有 三 种 。 

方法 1: 单 击 [标准 ] 工 具 栏 中 的 【保存 按钮 西 或 者 [全 部 保存 ] 按 钮 西 ， 

方法 2: 在 Dreamweaver CC 的 主 窗口 选 择 [ 文 件 ] 菜 单 中 的 [保存] 命令 或 者 [保存 全 
部 ] 命 令 。 

方法 3: 按 Ctrl 十 S 组 合 键 。 

提示 : 

(1) 如 果 同 时 打开 了 多 个 文档 窗口 , 则 需要 切换 到 待 保存 的 网 页 文档 所 在 窗口 中 进 
行 保存 。 当 然 单 击 【 全 部 保存 〗 按 钮 则 不 需要 切换 。 

(2) 如 果 网 页 文档 是 第 一 次 保存 , 则 会 弹出 一 个 “另存 为 "对话 框 ,必须 选择 正确 的 保 
存 路 径 并 输入 合适 的 文件 名 ,然后 单 击 【[ 保 存 】 按 钮 即 可 。 


4. 关闭 网 页 文档 


在 Dreamweaver CC 主 窗口 中 如 果 需 要 关闭 打开 的 网 页 文档 ,选择 【文件 菜单 中 的 
【关闭 ] 命 令 或 者 [全 部 关闭 命令 即 可 。 如 果 页 面 尚 未 保存 , 则 会 弹出 一 个 对 话 框 ,确认 是 
否 保存 。 

只 
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任务 人 2 认 知 HIML5 的 典型 标记 和 结构 标签 


【任务 冀 太 】 


任务 1-2-1 分 析 HTML 代码 的 组 成 结构 
任务 1-2-2 认 知 HTML5 中 典型 的 标记 方法 
任务 1-2-3 认 知 HTML5 主要 的 结构 标签 


【任务 袜 邦 】 
任务 1-2-1 分 析 HTML 代码 的 组 成 结构 


1. 打开 网 页 文档 0102. html 与 浏览 HTML 代码 
文件 夹 “0102” 中 网 页 文档 0102. html 的 浏览 效果 如 图 1-21 所 示 。 





顶部 菜单 1 ”顶部 菜单 2 ” 顶部 菜单 3 。 顶部 荣 单 4 


正文 内 容 之 一 。 小 标题 1 
。 小 标题 2 
。 小 标题 3 


Ri 





图 1-21 网 页 0102. html 的 浏览 效果 


网 页 0102. html 对 应 的 HTML 代码 如 表 1-1 所 示 。 
表 1-1 网 页 0102. html 对 应 的 HTML 代码 





序号 HTML 代码 
01 < !DOCTYPE html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"/> 
05 <title>HTML5 应 用 实例 < /title> 
06 <link rel= "stylesheet" href= "css/style.css" type= "text/css"/> 
07 < /head> 
08 <body> 
09 <header id- "page header"> 
10 <nav> 
11 <ul> 
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续 表 

序号 HTML 代码 

i <1i><a href= 哇 "> 顶部 菜单 1< /a></1i> 

13 <1i><a href= 哇 "> 顶部 菜单 2< /a></1i> 

14 <1i><a href="#"> 顶 部 菜单 3< /a>< /1i> 

15 <1i><a href="#"> 顶 部 菜单 4< /a></1i> 

16 </ul> 

17 < /nav> 

18 < /header> 

19 <section id= "posts"> 

20 <article class= "post"> 

21 <p> 正 文 内 容 之 一 < /p> 

22 </article> 

23 <article class= "post"> 

24 <aside> 

25 < img src="t01.jpg" alt="" width="120" height= "48"/> 

26 </aside> 

27 <p> 正 文 内 容 之 二 < /p> 

2 </article> 

29 </section> 

30 <section id= "sidebar"> 

31 <nav> 

32 <ul> 

33 <1i><a href= 只 "> 小 标题 1< /a></1i> 

34 <1i><a href= 叶 "> 小 标题 2< /a>< /1i> 

35 <1i><a href= 啡 "> 小 标题 3< /a></1i> 

36 <1i><a href= 只 "> 小 标题 4< /a>< /1i> 

37 </ul> 

38 </nav> 

39 </section> 

40 < footer id= "page footer"> 

41 <address> 底 部 导航 栏 < /address> 

42 < /footer> 

43 < /body> 

44 </htm> 





2. 分 析 空 白 网 页 HTML 代码 的 基本 结构 


下 面 对 表 1-1 中 的 HTML 代码 的 基本 结构 组 成 进行 分 析 。 

我 们 使 用 Dreamweaver CC 创建 0102. html 网 页 文件 ,会 自动 生成 由 HTML 语言 描 
述 的 代码 框架 。HTML 是 一 种 纯 文本 类 型 .解释 执行 的 标记 语言 ,使 用 HTML 编写 的 网 
页 文件 也 是 标准 的 纯 文本 文件 。 当 用 浏览 器 浏览 网 页 时 ,浏览 器 读 取 网 页 中 的 HTML 
代码 ,分析 其 语法 结构 ,然后 根据 解释 的 结果 显示 网 页 内 容 。 
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在 Dreamweaver CC 的 主 界面 中 单 击 【 代 码 ] 按 钮 ,切换 到 代码 视图 ,观察 网 页 的 
HTML 代码 ,对 HTML 代码 形成 初步 印象 。 
空白 网 页 的 HTML 代码 如 表 1-2 所 示 。 


表 1-2 空白 网 页 的 HTML 代码 








行 号 HTML 代码 
01 < !doctype html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title> 无 标题 文档 < /title> 
06 </head> 
07 <body> 
08 
09 < /body> 
10 </htm> 





网 页 HTML 代码 的 基本 结构 如 下 : 


<html> 
<head> 
<title> 网 页 标题 < /title> 
</head> 
<body> 
网 页 内 容 
< /body> 
</htm> 


HTML 文档 主要 是 由 头 部 内 容 和 主体 内 容 两 部 分 组 成 。 头 部 内 容 是 文档 的 开头 部 
分 ,对 文件 进行 一 些 必要 的 定义 ;主体 内 容 是 HTML 网 页 的 主要 部 分 。 
HTML5 的 基础 标签 与 元 信息 标签 如 表 1-3 所 示 。 
表 1-3 HTMLS 的 基础 标签 与 元 信息 标签 


标签 名 称 标签 描述 
二 1ldoctype | 定义 文档 类 型 








<html> 二 html 二 > 和 <</html 二 标签 在 最 外 层 ,表示 这 对 标签 之 间 的 内 容 是 HTML 文档 





head 头 部 标签 以 二 head 二 标签 开始 ,以 二 /head 二 标签 结束 。 头 部 标签 出 现在 文件 的 
<head> 起 始 部 分 ,用 来 说 明文 件 的 有 关 信 息 。 头 部 标签 内 最 常用 的 标签 是 标题 标签 ,其 格 
式 为 : <title> 网 页 标题 二 /title> 





<title> 定义 文档 的 标题 





<meta> 定义 关于 HTML 文档 的 元 信息 








<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 
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续 表 
标签 名 称 标签 描述 
i 定义 文档 的 主体 ,文档 主体 内 容 以 一 body 之 标签 开始 ,以 一 /body 之 标签 结束 ,网 页 
正文 中 的 所 有 内 容 包 括 文字 、 图 像 表格 .动画 等 都 包含 在 这 对 标签 之 间 
去 !--...->> | 定义 注释 











HTML5 标签 的 核心 属性 如 表 1-4 所 示 。 
表 1-4 HTMLS 标签 的 核心 属性 




















属性 名 称 取 值 属性 描述 
class classname 规定 元 素 的 类 名 (classname) 
id id 规定 元 素 的 唯一 id 
style style_definition 规定 元 素 的 行内 样式 (inlinestyle) 
title text 规定 元 素 的 额外 信息 (可 在 工具 提示 中 显示 ) 


3. 分 析 网 页 body 主体 的 HTML 代码 


网 页 body 主体 的 HTML 代码 分 析 如 下 。 

1) 头 部 代码 

网 页 0102. html 的 头 部 代码 由 二 header 二 标签 实现 ,如 表 1-1 中 第 09 一 18 行 所 示 。 

三 header 二 标签 不 能 和 hl、h2、h3 这 些 标 题 混为一谈 ,所 header 盖 元 素 可 以 包含 从 公 
司 logo 到 搜索 框 在 内 的 各 式 各 样 的 内 容 。 同 一 个 页 面 可 以 包含 多 个 二 header 二 元 素 , 每 
个 独立 的 区 块 或 文章 都 可 以 含有 自己 的 二 header> 。 

2) 尾部 代码 

网 页 0102. html 的 尾部 代码 由 二 footer 二 标签 实现 ,如 表 1-1 中 第 40 一 42 行 所 示 。 

三 footer 记 元 素 位 于 页 面 或 者 区 块 的 尾部 ,用 法 和 二 header 记 基本 一 样 ,也 会 包含 其 
他 元 素 。 
3) 导航 代码 

网 页 0102. html 的 导航 由 二 nav 二 标签 实现 ,如 表 1-1 中 第 31 一 38 行 所 示 。 

网 页 导航 对 于 一 个 网 页 来 说 至 关 重 要 ,快速 方便 的 导航 是 留 住 访客 所 必需 的 。 导 航 
可 以 被 包含 在 二 header 二 或 二 footer 一 或 者 其 他 区 块 中 ,一 个 页 面 可 以 有 多 个 导航 。 

4) 区 块 和 文章 代码 

网 页 0102. html 的 区 块 和 文章 由 过 section 之 和 二 article 之 标签 实现 ,如 表 1-1 中 第 
19 一 29 行 所 示 。 

< 所 section 盖 元 素 将 页 面 的 内 容 合理 归 类 于 布局 ,可 以 看 到 二 article 之 元 素 还 可 以 包 
含 很 多 元 素 。 

5) 旁白 和 侧 边栏 代码 

网 页 0102. html 的 侧 边栏 由 一 aside 二 实现 ,如 表 1-1 中 第 24 一 26 行 所 示 。 

二 aside 二 标签 可 实现 旁白 ,一 般 加 在 二 article 二 中 使 用 。 二 aside 二 元 素 是 为 主 内 容 
添加 的 附加 信息 ,再 加 入 引言 .图片 等 。 侧 边栏 不 一 定 是 旁白 ,可 以 看 作 是 右面 的 一 个 区 
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域 , 包 含 链 接 , 可 用 二 section 二 和 二 nav 二 实现 。 
任务 1-2-2 认 知 HTMLS5 中 典型 的 标记 方法 


HTML5 中 典型 的 标记 方法 如 下 。 

1) 内 容 类 型 (ContentType) 

HTML5 文档 的 扩展 名 仍然 为 “. html? 或 者 “. htm”, 内 容 类 型 (ContentType) 仍 然 为 
“text/html”。 

2) DOCTYPE 声明 

HTML5 中 使 用 二 1DOCTYPE html 放 声明 ,该 声明 方式 适用 所 有 版 本 的 HTML。 

二 1DOCTYPE 放 声明 必须 是 HTML 文档 的 第 一 行 ,位 于 二 html 二 标签 之 前 。 二 ! 
DOCTYPE 二 声明 不 是 HTML 标签 ; 它 是 指示 Web 浏览 器 关于 页 面 应 使 用 哪个 HTML 
版 本 进行 编写 的 指令 。 

在 HTML4.01 中 ,二 !DOCTYPE> 声 明 引 用 DTD, 因 为 HTML4. 01 基于 SGML。 
DTD 规定 了 标签 语言 的 规则 ,这 样 浏览 器 才能 正确 地 呈现 内 容 。HTML5 不 基于 
SGML ,所 以 不 需要 引用 DTD。 在 HTML4. 01 中 有 三 种 二 !1DOCTYPE 二 声明 。 在 
HTML5 中 只 有 一 种 , 即 二 !IDOCTYPE html> 。 

< 二 1DOCTYPE> 声 明 没 有 结束 标记 ,并 且 对 大 小 写 不 敏感 。 应 始终 向 HTML 文档 
添加 二 !1DOCTYPE 声 明 ,这 样 浏览 器 才能 获知 文档 类 型 。 

3) 指定 字符 编码 

HTML5 中 的 字符 编码 推荐 使 用 UTF-8,HTML5 中 可 以 使 用 二 meta 二 元 素 直接 追 
加 charset 属性 的 方式 来 指定 字符 编码 : 二 meta charset= 王 "utf-8" 二 。 

HTMIA4 中 使 用 一 meta http-equiv 王 "Content-Type" content= "text/html;charset==utf- 
8" 二 继续 有 效 ,但 不 能 同时 混合 使 用 两 种 方式 。 

4) 具有 boolean 值 的 属性 

当 只 写 属性 而 不 指定 属性 值 时 表示 属性 为 true, 也 可 以 将 属性 名 设 定 为 属性 值 或 将 
空 字符 串 设 定 为 属性 值 ;如 果 想 要 将 属性 值 设 置 为 false, 可 以 不 使 用 该 属性 。 

5) 引号 

指定 属性 时 属性 值 两 边 既 可 以 用 双 引 号 也 可 以 用 单 引 号 。 当 属性 值 不 包括 空 字符 
串 ` 二 > 一. 单 引号 、 双 引号 等 字符 时 ,属性 两 边 的 引号 可 以 省 略 。 例 如 : 二 input type 一 
"text"> 二 input type= text> 二 input type=text> 。 


任务 1-2-3 认 知 HTMLS 主要 的 结构 标签 


HTML5 提供 了 新 的 元 素来 创建 更 好 的 页 面 结构 ,其 主要 的 结构 标签 说 明 如 下 。 
1) 所 header 二 标签 
二 header 二 标签 用 于 定义 文档 的 头 部 区 域 .表示 页 面 中 一 个 内 容 区 块 或 整个 页 面 的 
标题 。 
2) 二 section 记 标签 
三 section 记 标签 用 于 定义 文档 中 的 节 (section、 区 段 ) ,表示 页 面 中 的 一 个 内 容 区 块 ,例如 
和 
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章节 ,页 眉 、 页 脚 或 页 面 的 其 他 部 分 。 可 以 和 hl、h2 等 元 素 结合 起 来 使 用 ,表示 文档 结构 。 

3) 二 footer 二 标签 

二 footer 二 标签 用 于 定义 文档 或 节 的 页 脚 部 分 ,表示 整个 页 面 或 页 面 中 一 个 内 容 
块 的 脚注 ,通常 包含 文档 的 作者 、 版 权 信息 、 使 用 条 款 链 接 、 联 系 信息 等 。 可 以 在 一 
文档 中 使 用 多 个 二 footer 二 元 素 , 二 footer 二 元 素 内 的 联系 信息 应 该 位 于 二 address 二 标 
签 中 。 

4) 一 article 之 标签 

三 article 志 标签 用 于 定义 页 面 中 一 块 与 上 下 文 不 相关 的 独立 内 容 ， es 
二 article 二 元 素 的 潜在 来 源 可 能 有 论坛 帖子 、 报 纸 文 章 、 博 客 条 目 、 用 户 评论 

5) 二 aside 二 标签 

过 aside> 标 签 用 于 定义 页 面 内 容 之 外 的 内 容 , 表 示 article 元 素 内 容 之 外 的 与 article 
元 素 内 容 相 关 的 辅助 信息 。 

6) 二 hgroup 二 标签 

<hgroup 过 标签 用 于 对 整个 页 面 或 页 面 中 的 一 个 内 容 区 块 的 标题 进行 组 合 。 


【同步 训练 】 





他 风 


任务 人 3 打开 并 浏览 网 页 0103htm 


(1) 在 Dreamweaver CC 中 打开 文件 夹 “0103” 中 的 网 页 0103. html 并 进行 浏览 ,其 
浏览 效果 如 图 1-22 所 示 。 
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图 1-22 ”网 页 0103. html 的 浏览 效果 
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(2) 在 Dreamweaver CC 主 窗口 中 切换 到 【代码 了 视图 ,观察 网 页 的 HTML 代码 。 
【技术 进 阶 】 


1. 主流 浏览 器 的 默认 样式 以 及 清除 属性 的 默认 设置 方法 


不 同 的 浏览 器 ,对 于 标签 样式 的 默认 值 存在 一 定 的 差异 。 
(1) body 标签 的 页 边 距 

(2) 标题 样式 

(3) 段 间距 

(4) 超 链 接 样 式 

(5) 列表 样式 

(6) 图 片 边框 样式 

(7) 默认 指针 样式 

(8) 元 素 居 中 

(9) 表格 


2. CSS 代码 中 注释 的 合理 使 用 


在 CSS 代码 中 添加 必要 的 注释 对 日 后 代码 维护 和 团队 内 信息 交流 提供 了 很 大 的 方 
便 , 有 助 于 快速 了 解 代码 的 意图 。 
CSS 代码 的 注释 以 “/ x* ”符号 开头 ,以 “x* /” 符 号 结束 ,示例 代码 如 下 : 








#box{ 
margin- top: 10px; /* 设 置 上 外 边 距 为 10pxx / 
margin- bottom: Spx; /* 设 置 下 外 边 距 为 5px* / 


' 


CSS 代码 注释 的 放置 位 置 和 表达 方式 没有 固定 的 模式 ,可 以 根据 需要 添加 。 例 如 在 
代码 段 前 面 添 加 注释 ,便于 日 后 了 解 代码 段 的 功能 ;在 每 个 选择 符 后 或 者 在 每 个 属性 定义 
后 添加 注释 ,起 着 提示 或 说 明 的 作用 ,方便 阅读 。 但 是 不 必 为 每 条 属性 定义 添加 注释 ,有 
些 代 码 一 看 就 明白 ,不 必 添 加 注释 。 

CSS 代码 中 添加 的 注释 有 时 也 会 出 现 一 些 问题 ,例如 ,为 CSS 代码 添加 中 文 注释 ,有 
些 情况 下 会 导致 部 分 CSS 样式 代码 无 效 ,其 主要 原因 是 文档 编码 类 型 .服务 器 端 支持 等 
方面 引起 的 ,可 以 把 注释 改 成 英文 或 者 删除 中 文 注释 ,也 可 以 把 文档 编码 改 成 与 页 面 一 致 
的 编码 ,例如 把 文档 编码 改 为 GB 2312 后 则 正常 显示 。 

对 于 使 用 二 style 二 二 /style 二 标签 将 CSS 样式 定义 嵌入 HTML 代码 中 的 情况 ,如果 
添加 注释 , 则 后 面相 邻 的 样式 可 能 会 失效 ,但 不 会 影响 后 面 不 相 邻 样式 的 效果 。 示 例 代码 
如 下 : 


< style type= "text/css" > 
< !-- 这 条 注释 将 使 相 邻 样式 定义 body 失效 --> 
焰 
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body{color:#f£39;} 
p{color:# 630;} 
</style> 


如 果 把 上 面 的 示例 代码 中 的 注释 文字 的 尾部 增加 一 个 空格 ,也 就 是 在 “失效 ”和 
“二 ”之 间 增 加 一 个 空格 , 则 样式 代码 恢复 正常 功能 。 


【问题 探究 】 


【问题 1】 解释 网 页 和 网 站 ,并 简要 说 明 网 页 的 工作 原理 。 

1) 网 页 

网 页 是 用 HTML( 超 文本 标记 语言 ) 或 者 其 他 语言 编写 的 ,通过 浏览 器 编 译 后 供用 户 
获取 信息 的 页 面 ,网 页 中 可 以 包含 文字 、 图 像 , 动 画 、 视 频 、 超 链接 (也 称 超级 链接 ) 等 各 种 
网 页 元 素 。 

网 页 按 其 表现 形式 可 以 分 为 静态 网 页 和 动态 网 页 。 静 态 网 页 实际 上 是 图 文 结构 的 页 
面 ,浏览 者 可 以 阅读 页 面 中 的 信息 ,网 页 中 可 以 包括 GIF 动画 、Flash 动画 、 视 频 和 脚本 程 
序 等 ,但 是 浏览 器 端 与 服务 器 端 不 发 生 交 互 操作 。 动 态 网 页 的 “ 动 ” 指 的 是 “交互 性 ”, 是 指 
浏览 器 端 和 服务 器 端 可 以 进行 交互 操作 ,大 部 分 信息 存储 在 服务 器 端的 数据 库 中 ,根据 浏 
览 者 的 请 求 从 服务 器 端的 数据 库 中 取出 数据 ,传送 到 浏览 器 端 ,然后 显示 出 来 。 

2) 网 站 

网 站 是 若干 个 相关 网 页 的 集合 。 通 过 超 链接 使 网 站 中 多 个 网 页 建立 联系 ,形成 一 个 
主题 人 鲜明、 风格 一 致 的 Web 站 点 。 网 站 中 的 网 页 结构 性 较 强 ,组 织 比较 严密 。 通 常 ,网 站 
都 有 一 个 主页 ,包括 网 站 Logo 和 导航 栏 等 内 容 , 导 航 栏 包含 了 指向 其 他 网 页 的 超 链接 。 

3) 网 页 的 工作 原理 

网 站 包含 的 文件 位 于 Web 服务 器 中 ,浏览 者 通过 浏览 器 向 Web 服务 器 发 出 请 求 ; 
Web 服务 器 则 根据 请 求 ,把 浏览 者 所 访问 的 网 页 传送 到 客户 端 ,显示 在 浏览 器 中 。 一 个 
网 页 的 工作 过 程 可 以 归纳 为 以 下 四 个 步骤 。 

(1) 用 户 在 浏览 器 中 输入 网 页 的 网 址 ,例如 : http: //www. sina. com。 

(2) 客户 端的 访问 请 求 被 送 往 网 站 所 在 的 Web 服务 器 ,服务 器 查找 对 应 的 网 页 。 

(3) 若 找到 网 页 , 则 Web 服务 器 把 找到 的 网 页 回 送 给 客户 端 。 

(4) 客户 端 收 到 返回 的 网 页 后 在 浏览 器 中 显示 出 来 。 

【问题 2】 解释 述 语 : InternetWWW、URL .HyperText、HTTP 、HTML .CSS Server 
与 Browser。 

(1) Internet 

(2) WWW 

(3) URL 

(4) HyperText 

《5§) HTTP 

(6) HTMEL 

《7) CSS 
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(8) Server 与 Browser 

【问题 3】 制作 网 页 与 处 理 网 页 元 素 的 常用 工具 有 了 哪些 ? 

制作 网 页 的 专业 工具 功能 越 来 越 完善 .操作 越 来 越 简单 ,处理 图 像 .制作 动画 ,发布 网 
站 的 专业 软件 应 用 也 非常 广泛 。 

常用 制作 网 页 的 工具 如 下 。 

(1) 制作 网 页 的 专门 工具 : Dreamweaver。 

(2) 图 像 处 理工 具 : Photoshop Fireworks。 

(3) 动画 制作 工具 : Flash .Swish 。 

(4) 抓 图 工具 : HyperSnap HyperCam Camtasia Studio。 

(5) 网 站 发 布 工具 : CuteFTP。 

【问题 4】 HTMLS 的 主要 变化 有 哪些 ? 

(1) 取消 了 一 些 过 时 的 HTML4 标记 。 

(2) 将 内 容 和 展示 分 离 。 

(3) 增加 了 一 些 全 新 的 表单 输入 对 象 。 

(4) 增加 了 全 新 的 、 更 合理 的 Tag。 

(5) 本 地 数据 库 。 

(6) Canvas 对 象 。 

(7) 浏览 器 中 的 真正 程序 。 

(8) HTML5 取代 Flash 在 移动 设备 的 地 位 。 

(9) HTML5 突出 的 特点 就 是 强化 了 Web 页 面 的 表现 性 ,增加 了 本 地 数据 库 。 

【问题 5】 HTMLS 新 增 的 标签 和 废除 的 标签 各 有 了 哪些? 

HTML5 中 ,在 新 增加 了 多 个 标签 元 素 , 同 时 也 废除 了 多 个 标签 元 素 。 

(1) HTML5 新 增 的 标签 。 

(2) HTML5 废除 的 标签 。 

【问题 6】 HTMLS 新 增 的 标签 和 废除 的 属性 各 有 了 哪些? 

HTML5 中 ,在 新 增加 和 废除 很 多 元 素 的 同时 ,也 增加 和 废除 了 很 
多 属性 。 

(1) HTML5 新 增 的 属性 。 

(2) HTML5 废除 的 属性 。 

HTML4 中 一 些 属性 在 HTML5 中 不 再 被 使 用 ,而 是 采用 其 他 属性 
或 其 他 方式 代替 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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网 页 中 的 信息 主要 通过 文字 来 表达 的 ,文字 是 网 页 的 主体 和 构成 网 页 最 基本 的 元 素 ， 
它 具 有 准确 快捷 地 传递 信息 ,存储 空间 小 、 易 复制 . 易 保 存 、 易 打印 等 优点 ,其 优势 很 难 被 
其 他 元 素 所 取代 。 在 Dreamweaver CC 中 输入 文本 与 在 Word 中 输入 文本 很 相似 ,都 可 
以 对 文本 的 格式 进行 设置 。 


【知识 尾 备 】 


1. HTML 中 常用 的 结构 标签 


HTML5 的 结构 标签 与 编程 标签 如 表 2-1 所 示 。 
表 2-1 HTMLS 的 结构 标签 与 编程 标签 




















标签 名 称 标签 描述 标签 名 称 标签 描述 
<header> 定义 section 或 page 的 页 眉 <div> 定义 文档 中 的 节 
二 section>> | 定义 section <p> 定义 段落 
=article> 定义 文章 <span> 定义 文档 中 的 节 
<aside> 定义 页 面 内 容 之 外 的 内 容 <dialog> 定义 对 话 框 或 窗口 
<footer> 定义 section 或 page 的 页 脚 <script> 定义 客户 端 脚本 
style> | 定义 文档 的 样式 信息 ee 














1) 二 div 志 标签 

div 是 division( 分 割 ) 的 缩写 ,是 一 个 通用 块 状元 素 , 是 常用 的 结构 化 元 素 , 其 display 
属性 默认 为 block。div 没有 明确 的 语义 ,表示 文档 结构 块 的 意思 , 它 可 以 把 文档 分 割 为 
多 个 有 意义 的 区 域 ,所 以 使 用 一 div 之 标签 可 以 实现 网 页 的 布局 ,是 网 页 布局 的 主要 元 素 。 

2) 标题 标签 

HTML 中 ,定义 了 6 级 标题 ,分 别 为 hl1、h2、h3、h4、h5、h6, 这 六 个 标签 具有 明确 的 语 
义 ,这些 元 素 的 第 一 个 字母 h 是 header( 标 题 ) 的 首 字母 ,后 面 的 数字 表示 标题 的 级 别 。 使 
用 hl、h2、h3、h4、h5 和 h6 可 以 定义 网 页 标题 ,每 级 标题 的 字体 大 小 依次 递减 ,其 中 hl 表 
示 1 级 标题 ,其 字号 最 大 ;h2 表示 二 级 标题 ,字号 较 小 ,其 他 标签 依 此 类 推 ,6 级 标题 字号 
最 小 。 

hl、h2、h3、h4、h5 和 hi6 都 是 块 状元 素 ,CSS 和 浏览 器 都 预定 义 了 一 hl 之 一 一 h6 二 标 
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签 的 默认 样式 ,一 般 搜索 引擎 对 标题 标签 具有 较 强 的 敏感 性 ,特别 是 hl 和 h2 元 素 。 建 议 
使 用 王 hl 之 一 一 h6 之 标签 定义 网 页 的 标题 ,并 且 放 在 相应 的 结构 层次 中 。 

3) 段落 标签 

P 是 paragraph( 段 落 ) 的 首 字母 ;一 p 过 标签 用 于 定义 文本 段落 ,该 标签 具有 明确 的 语 
义 特征 。 二 p 二 标签 是 块 状元 素 。 每 个 文本 段落 在 默认 状态 下 都 定义 了 上 下 边界 ,具体 
大 小 在 不 同 浏览 器 中 有 所 区 别 。 当 需要 在 网 页 中 插入 新 的 段落 时 ,可 以 使 用 段落 标签 
一 p 二 二 /p 二 , 它 可 以 将 标签 后 面 的 内 容 另 起 一 段 。 在 Dreamweaver CC 的 设计 视图 中 ， 
按 Enter 键 后 ,就 会 自动 形成 一 个 段落 ,相当 于 添加 了 过 p> 标 签 。 

4) 一 span 过 标签 

span 表示 范围 的 意思 ,是 一 个 通用 内 联 元 素 , 没 有 明确 的 语义 特征 ,可 以 作为 文本 或 
内 联 元 素 的 容器 ,其 display 属性 默认 为 inline。 一 般 用 二 span 之 标签 为 部 分 文本 或 内 联 
元 素 定义 特殊 的 样式 .修饰 特定 内 容 和 辅助 div 完善 页 面 布 局 等 。 


2. HTMLS 中 常用 的 文本 标签 


HTML5 的 格式 标签 如 表 2-2 所 示 。 
表 2-2 HTMLS5 的 格式 标签 



























































标签 名 称 标签 描述 标签 名 称 标签 描述 
<acronym> 定义 只 取 首 字母 的 缩写 <kbd> 定义 键盘 文本 
<abbr> 定义 缩写 <mark> 定义 有 记号 的 文本 

定义 文本 的 文本 方向 ,使 其 脱 定义 车 浏览 器 不 支持 ruby 元 
> 离 周围 文本 的 方向 设置 ea 素 显示 的 内 容 
<b> 定义 粗 体 文本 <pre> 定义 预 格式 文本 
a ee 一 progress> | 定义 任何 类 型 的 任务 的 进度 
一 bdo> 定义 文字 方向 <q> 定义 短 的 引用 
<big> 定义 大 号 文本 <meter> 定义 预定 义 范围 内 的 度量 
一 blockquote> | 定义 长 的 引用 <ruby> 定义 ruby 注释 
<cite> 定义 引用 (citation) <rt> 定义 ruby 注释 的 解释 
<code> 定义 计算 机 代码 文本 <samp> 定义 计算 机 代码 样本 
<del> 定义 被 删除 文本 <small> 定义 小 号 文本 
=details> 定义 元 素 的 细节 <summary> et 
<dfn> 定义 项 目 <strong> 定义 语气 更 为 强烈 的 强调 文本 
<em> 定义 强调 文本 <sup> 定义 上 标 文本 
一 hl>to<h6> | 定义 HTML 标题 <sub> 定义 下 标 文本 
<hr> 定义 水 平 线 <time> 定义 日 期 /时 间 
<i> 定义 斜体 文本 <tt> 定义 打字 机 文本 
<ins> 定义 被 插入 文本 <var> 定义 文本 的 变量 部 分 
<wbr> 定义 换行 符 <br> 定义 简单 的 换行 
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1) 二 br 二 标签 与 二 wbr 二 标签 

二 br 二 是 一 个 单 标签 ,没有 结尾 的 标签 ,br 是 英文 单词 break 的 缩写 。 二 br 二 标签 用 
于 将 文字 在 一 个 段 内 强制 换行 ,而 不 是 分 割 段落 。 

二 br 二 标签 只 是 简单 地 开始 新 的 一 行 , 而 当 浏 览 器 遇 到 二 p 二 标签 时 ,通常 会 在 相 
邻 的 段落 之 间 插 入 一 些 垂直 的 间距 。 所 br 标签 与 段落 标签 在 显示 效果 上 都 是 另 起 一 
行书 写 ,但 是 段落 标签 的 行距 要 宽 。 人 制作 网 页 时 ,换行 可 以 通过 按 Shift+ Enter 组 合 键 
实现 。 

所 wbr> 标 签 表 示 软 换行 ,用 于 在 文本 中 添加 换行 符 。 与 一 br 之 标签 元 素 的 区 别 是 
所 br> 标 签 表 示 此 处 必须 换行 ;过 wbr> 表 示 浏 览 器 窗口 或 父 级 元 素 足 够 宽 时 ( 没 必 要 换 
行 时 ) 则 不 换行 ,而 宽度 不 够 时 主动 在 此 处 换行 。 

2) 二 details 记 标签 与 二 summary 二 标签 

所 details 之 标签 用 于 描述 文档 或 文档 某 个 部 分 的 细节 ,目前 只 有 Chrome 浏览 器 支 
持 details 标签 ,可 以 与 二 summary 二 标签 配合 使 用 。 

二 summary 记 标签 用 于 描述 有 关 文 档 的 详细 信息 ,示例 代码 如 下 : 


<details> 
< summary> HTML5< /summary> 
This document teaches you everything you have to learn about HTML5. 
</details> 
二 summary 记 标签 为 details 元 素 定 义 标题 ,details 元 素 用 于 描述 有 关 文 档 或 文档 片 
段 的 详细 信息 。 志 summary 之 标签 应 与 二 details 之 标签 一 起 使 用 ,标题 是 可 见 的 , 当 用 户 
单 击 标题 时 会 显示 出 详细 信息 。summary 元 素 通常 是 details 元 素 的 第 一 个 子 元 素 。 
3) 一 bdi 盖 标签 
到 bdi 之 标签 用 于 设置 一 段 文本 ,使 其 脱离 父 元 素 的 文本 方向 设置 。 
4) 二 mark 二 标签 
二 mark 二 标签 主要 用 来 在 视觉 上 向 用 户 呈 现 那 些 需 要 突出 显示 或 高 亮 显示 的 文字 ， 
典型 应 用 是 搜索 结果 中 高 亮 显 示 搜索 关键 字 。 
5) 二 meter 二 标签 
二 meter> 标 签 用 于 定义 度量 衡 。 仅 用 于 已 知 最 大 和 最 小 值 的 度量 。 
6) 一 progress 二 标签 
二 progress 二 标签 用 于 定义 任何 类 型 任务 的 运行 进度 ,可 以 使 用 progress 元 素 显 示 
JavaScript 中 耗 时 时 间 函 数 的 进程 。 


3. CSS 文本 属性 (Text) 


CSS 文本 属性 可 定义 文本 的 外 观 ,通过 文本 属性 ,可 以 改变 文本 的 颜色 .字符 间距 、 
对 齐 文本 、 装 饰 文本 、 对 文本 进行 缩 进 等 。 

1) 缩 进 文本 

把 Web 页 面 中 段落 的 第 一 行 缩 进 ,这 是 一 种 最 常用 的 文本 格式 化 效果 。CSS 提供 了 
text-indent 属性 ,该 属性 可 以 方便 地 实现 文本 缩 进 。 通 过 使 用 text-indent 属性 ,所 有 元 
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素 的 第 一 行 都 可 以 缩 进 一 个 给 定 的 长 度 , 甚 至 该 长 度 可 以 是 负 值 。 
text-indent 属性 最 常见 的 用 途 是 将 段落 的 首 行 缩 进 , 下 面 的 规则 会 使 所 有 段落 的 首 
行 缩 进 2em: 


p {text- indent:2emz} 


一 般 来 说 ,可 以 为 所 有 块 级 元 素 应 用 text-indent, 但 无 法 将 该 属性 应 用 于 行内 元 素 ， 
图 像 之 类 的 替换 元 素 上 也 无 法 应 用 text-indent 属性 。 不 过 ,如 果 一 个 块 级 元 素 ( 例 如 段 
落 ) 的 首 行 中 有 一 个 图 像 , 它 会 随 该 行 的 其 余 文 本 移动 。 如 果 想 把 一 个 行内 元 素 的 第 一 行 
“ 缩 进 ”, 可 以 用 左 内 边 距 或 外 边 距 创造 这 种 效果 。 

text-indent 属性 值 还 可 以 设置 为 负 值 ,利用 这 种 技术 ,可 以 实现 很 多 有 趣 的 效果 , 例 
如 "悬挂 缩 进 ”, 即 第 一 行 悬 挂 在 元 素 中 余下 部 分 的 左边 ,示例 代码 如 下 : 


p {text- indent: - 2em;} 


不 过 在 为 text-indent 设置 负 值 时 要 谨慎, 如 果 对 一 个 段落 设置 了 负 值 ,那么 首 行 的 
某 些 文本 可 能 会 超出 浏览 器 窗口 的 左边 界 。 为 了 避免 出 现 这 种 显示 问题 ,建议 针对 负 缩 
进 再 设置 一 个 外 边 距 或 一 些 内 边 距 ,示例 代 码 如 下 : 


Pp {text- indent:- 2em; padding- left:2em;} 


text-indent 属性 值 可 以 使 用 所 有 长 度 单位 ,包括 百分比 值 。 百 分 数 要 相对 于 缩 进 元 
素 父 元 素 的 宽度 。 换 句 话 说 ,如 果 将 缩 进 值 设 置 为 20%, 所 影响 元 素 的 第 一 行 会 缩 进 其 
父 元 素 宽度 的 20%。 

在 以 下 示例 代码 中 , 缩 进 值 是 父 元 素 的 20%, 即 100 个 像素 。 


div {width: 500px;} 

p {text- indent: 20%;} 

<div> 

<p> this is a paragragh< /p> 

</div> 

text-indent 属性 可 以 继承 。 

2) 水 平 对 齐 

text-align 是 一 个 基本 的 属性 , 它 会 影响 一 个 元 素 中 的 文本 行 互相 之 间 的 对 齐 方式 ， 
其 取 值 left right 和 center 会 导致 元 素 中 的 文本 分 别 左 对 齐 、 右 对 齐 和 居中 。 

3) 文字 间隔 

word-spacing 属性 可 以 改变 文字 (单词 ) 之 间 的 标准 间隔 ,其 默认 值 normal 与 设置 值 
为 0 是 一 样 的 。word-spacing 属性 接受 一 个 正 长 度 值 或 负 长 度 值 。 如 果 提 供 一 个 正 长 度 
值 ,那么 文字 之 间 的 间隔 就 会 增加 。 为 word-spacing 设置 一 个 负 值 ,就 会 把 文字 拉 近 , 示 
例 代码 如 下 : 

p.spread {word- spacing: 30px;} 

Pp-tight {word- spacing: ~ 0.5em;} 
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4) 字母 间隔 

与 word-spacing 属性 一 样 ,letter-spacing 属性 的 可 取 值 包括 所 有 长 度 , 默 认 关 键 字 
是 normal( 这 与 letter-spacing: 0 相同 ) 。 输 入 的 长 度 值 会 使 字母 之 间 的 间隔 增加 或 减少 
指定 的 量 ,示例 代码 如 下 : 


hl {letter- spacing: -0.5em} 

h4 {letter- spacing: 20px} 

letter-spacing 属性 与 word-spacing 的 区 别 在 于 ,字母 间隔 修改 的 是 字符 或 字母 之 间 
的 间隔 。 

5) 字符 转换 

text-transform 属性 处 理 文本 的 大 小 写 ,该 属性 有 4 个 取 值 :， none、 uppercase、 
lowercase 和 capitalize。 默 认 值 none 对 文本 不 做 任何 改动 ,将 使 用 源 文档 中 的 原 有 大 小 
写 。 顾 名 思 义 ,uppercase 和 lowercase 将 文本 转换 为 全 大 写字 符 和 全 小 写字 符 ,capitalize 
只 设置 每 个 单词 的 首 字母 大 写 。 

6) 文本 装饰 

text-decoration 属性 提供 了 很 多 非常 有 趣 的 行为 , 它 有 5 个 值 : none、 underline、 
overline ,line-through、blink。underline 会 对 元 素 添加 下 面 线 ;overline 的 作用 恰好 相反 ， 
会 在 文本 的 项 端面 一 个 上 夯 线 ;line-through 则 在 文本 中 间 画 一 个 贯穿 线 ;blink 会 让 文本 
闪烁 。 

none 值 会 关闭 原本 应 用 到 一 个 元 素 上 的 所 有 装饰 。 通 常 , 无 装饰 的 文本 是 默认 外 
观 , 但 也 不 总 是 这 样 。 例 如 ,链接 默认 会 有 下 画 线 , 如 果 和 希望 去 掉 超 链 接 的 下 画 线 ,可 以 使 
用 以 下 CSS 来 做 到 这 一 点 。 


a {text- decoration: none;} 


注意 : 如 果 显 式 地 用 这 样 一 个 规则 去 掉 链 接 的 下 画 线 ,那么 超 链 接 与 正常 文本 之 间 
在 视觉 上 的 唯一 差别 就 是 颜色 。 


7) 文本 阴影 

在 CSS3 中 ,text-shadow 可 向 文本 应 用 阴影 ,允许 规定 水 平 阴影 、 垂 直 阴 影 、 模 糊 距 
离 以 及 阴影 的 颜色 。 

8) 处 理 空白 符 


white-space 属性 会 影响 到 对 源 文档 中 的 空格 ,换行 和 Tab 字符 的 处 理 。 通 过 使 用 该 
属性 ,可 以 影响 浏览 器 处 理 文字 之 间 和 文本 行 之 间 的 空白 符 的 方式 。 从 某 种 程度 上 讲 , 默 
认 的 HTML 处 理 已 经 完成 了 空白 符 处 理 : 它 会 把 所 有 空白 符合 并 为 一 个 空格 。 所 以 给 
定 以 下 代码 , 它 在 Web 浏览 器 中 显示 时 ,各 个 字 之 间 只 会 显示 一 个 空格 ,同时 忽略 元 素 中 
的 换行 。 

<p> This paragraph has many spaces in it.</p> 

可 以 使 用 以 下 声明 显 式 地 设置 这 种 默认 行为 。 

Pp {white- space: normal;} 
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上 面 的 规则 告诉 浏览 器 按照 平常 的 做 法 去 处 理 : 丢掉 多 余 的 空白 符 。 如 果 给 定 这 个 
值 ,换行 字符 会 转换 为 空格 ,一 行 中 多 个 空格 也 会 转换 为 一 个 空格 。 
如 果 将 white-space 设置 为 pre, 受 这 个 属性 影响 的 元 素 中 ,空白 符 的 处 理 就 有 所 不 
同 , 其 行为 就 像 HTML 的 pre 元 素 一 样 ,空白 符 不 会 被 忽略 。 


4. CSS 字体 属性 (font) 


网 页 设计 时 ,一 般 使 用 font 属性 定义 字体 的 通用 属性 , 它 可 以 设置 所 有 字体 属性 , 包 
括 字 体 名 称 、 字 体 大 小 、 文 字 粗 细 样式、 变 体 、 颜 色 和 行 高 等 方面 ,定义 字体 通用 属性 的 示 
例 代码 如 下 : 





pi 
font : italic bold small- caps 12px "宋体 "，"Times New Roman", Arial; 
} 


使 用 font 属性 定义 字体 的 通用 属性 时 ,其 中 字体 大 小 和 字体 名 称 必须 设置 ,其 相对 
位 置 固定 不 变 , 其 他 属性 设置 可 以 省 略 ,相对 位 置 也 可 以 改变 。 如 果 需 要 设置 行 高 ,可 以 
使 用 斜 枉 */? 附 加 在 字体 大 小 值 的 右边 , 即 为 "12px/2em” 的 形式 。 但 要 注意 文字 颜色 不 
能 在 font 属性 中 定义 ,必须 单独 定义 。 

1) 文字 字体 

在 CSS 中 ,通常 有 两 种 不 同类 型 的 字体 系列 。 

(1) 通用 字体 系列 : 拥有 相似 外 观 的 字体 系统 组 合 ( 例 如 Serif 或 Monospace 字体 )。 

(2) 特定 字体 系列 : 具体 的 字体 系列 (例如 Times 或 Courier) 。 

除了 各 种 特定 的 字体 系列 外 ,CSS 定义 了 五 种 通用 字体 系列 : Serif 字体 、Sans-serif 
字体 、Monospace 字体 .Cursive 字体 和 Fantasy 字体 。 

使 用 font-family 属性 定义 文本 的 字体 系列 。 如 果 和 希望 文档 使 用 一 种 sans-serif 字 
体 , 但 是 并 不 关心 是 哪 一 种 字体 ,以 下 就 是 一 个 合适 的 声明 。 


body {font- family: sans- serif;} 


这 样 就 会 从 sans-serif 字体 系列 中 选择 一 个 字体 (如 Helvetica) ,并 将 其 应 用 到 body 
元 素 。 因 为 有 继承 ,这 种 字体 选择 还 将 应 用 到 body 元 素 中 包含 的 所 有 元 素 ,除非 有 一 种 
更 特定 的 选择 器 将 其 覆盖 。 

除了 使 用 通用 的 字体 系列 ,还 可 以 通过 fontfamily 属性 设置 更 具体 的 字体 。 下 面 的 
实例 为 所 有 hl 元 素 设置 了 Georgia 字体 。 


hl {font- family: Georgia;} 


这 样 的 规则 同时 会 产生 另外 一 个 问题 ,如果 计 算 机 中 没有 安装 Georgia 字体 ,就 只 能 
使 用 默认 字体 来 显示 hl 元 素 。 我 们 可 以 通过 结合 特定 字体 名 和 通用 字体 系列 来 解决 这 
个 问题 ,示例 代码 如 下 : 


hl {font- family: Georgia, serif;} 
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如 果 计 算 机 中 没有 安装 Georgia, 但 安装 了 Times 字体 (serif 字体 系列 中 的 一 种 字 
体 ) ,就 可 能 对 hl 元 素 使 用 Times。 尽 管 Times 与 Georgia 并 不 完全 匹配 ,但 至 少 足 够 
接近 。 

建议 在 所 有 font-family 规则 中 都 提供 一 个 通用 字体 系列 ,这 样 就 提供 了 一 条 后 路 ， 
在 无 法 提供 与 规则 匹配 的 特定 字体 时 ,就 可 以 选择 一 个 候选 字体 。 

当 字 体 名 中 有 一 个 或 多 个 空格 (例如 New York) ,或 者 如 果 字 体 名 包括 # 或 $ 之 类 
的 符号 , 才 需 要 在 font-family 声明 中 加 引号 。 单 引号 或 双 引号 都 可 以 接受 。 但 是 ,如 果 
把 一 个 font-family 属性 放 在 HTML 的 style 属性 中 , 则 需要 使 用 该 属性 本 身 未 使 用 的 那 
种 引号 ,示例 代码 如 下 : 


<p style= "font- family: Times, 'New York', serif;">...</p> 


一 般 计算 机 中 都 安装 有 多 种 字体 。 如 果 没 有 显 式 定义 网 页 字体 ,浏览 器 会 使 用 默认 
的 字体 浏览 网 页 ,例如 Windows 中 文 版 操作 系统 默认 字体 是 宋体 或 新 宋体 ,英文 默认 字 
体 是 Arial。 

为 了 保证 在 所 有 的 浏览 器 中 都 能 正确 显示 ,提倡 使 用 系统 默认 字体 ,例如 中 文中 用 宋 
体 或 新 宋体 ,英文 用 Arial。 这 样 可 以 保证 用 户 系统 中 字体 缺少 时 ,浏览 器 仍 能 够 正确 解 
析 并 显示 文字 。 制 作 网 页 时 ,应 养 成 显 式 定义 网 页 字体 的 好 习惯 ,以 保证 页 面 文字 在 不 同 
浏览 器 中 都 能 正常 显示 。 定 义 字体 的 CSS 示例 代码 如 下 : 


body { 
font- family: "宋体 ", "Times New Roman",Arial; 
} 


定义 字体 时 可 以 使 用 多 种 类 型 的 字体 , 按 优先 顺序 排列 ,使 用 半角 逗号 “,” 分 隔 。 网 
页 打开 时 ,浏览 器 会 从 用 户 计算 机 中 寻找 font-family 中 声明 的 第 一 种 字体 。 如 果 计 算 机 
中 没有 这 种 字体 , 则 会 继续 寻找 第 二 种 字体 , 依 此 类 推 。 在 实际 应 用 中 ,由 于 大 部 分 操作 
系统 的 中 文 版 只 安装 了 宋体 .黑体 等 一 些 常用 的 字体 ,所 以 设置 中 文字 体 属 性 时 不 要 选择 
特殊 字体 ,应 尽量 选择 宋体 .黑体 等 常用 字体 。 否 则 当 浏 览 者 的 计算 机 没有 安装 该 字体 
时 ,显示 会 出 现 异 常 。 如 果 需 要 一 些 装 饰 性 字体 ,可 以 使 用 图 像 方式 代替 纯 文 本 。 

当 不 能 确保 所 设置 的 字体 在 所 有 浏览 者 的 计算 机 中 都 安装 时 ,将 一 种 通用 字体 加 在 
字体 列表 的 最 后 是 一 种 好 的 做 法 。 通 用 字体 包括 五 类 : serif 系列 (成 比例 有 衬 线 字体 , 常 
用 的 字体 有 Times New Roman Times serif) 、sans-serif 系列 (成 比例 无 衬 线 字体 ,常用 
的 字体 有 Arial .Helvetica sans-serif) .cursive 系列 (模拟 手写 字体 ,常用 的 字体 有 Comic 
Sans MS 、cursive) 、fantasy 系列 (特殊 字体 ,此 类 字体 比较 少 , 例如 Western) 和 
monospace 系列 (等 宽 字 体 , 常 用 的 字体 有 Courier New、Courier、monospace)。 通 用 字体 
主要 针对 英文 字体 而 定义 ,对 中 文 汉字 的 浏览 存在 差异 ,在 设置 字体 时 ,应 选用 中 文字 体 ， 
一 般 为 宋体 或 新 宋体 。 

如 果 一 种 字体 的 名 称 中 有 空格 ,例如 Times New Roman, 在 CSS 定义 时 要 使 用 半角 
引号 包含 该 字体 ,例如 : 
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p{ 
font- family:Georgia, "Times New Roman", Times, serif; 


如 果 声 明 被 包含 在 双 引 号 中 , 则 字体 名 应 用 单 引号 ,例如 : 
<p style= "font- family:Georgia, 'Times New Roman', Times, serif">< /p> 


通常 中 文 标题 习惯 使 用 黑体 或 宋体 加 粗 ,正文 文字 多 使 用 宋体 。 英 文 标题 多 使 用 
sans-serif 系列 字体 ,例如 Arial。 而 正文 文字 适合 使 用 serif 系列 字体 ,例如 Times New 
Roman。 

2) 字体 风格 

font-style 属性 最 常用 于 规定 斜体 文本 ,该 属性 有 三 个 取 值 : normal( 文 本 正常 显 
示 ) ,italic( 文 本 斜体 显示 ) .oblique( 文 本 倾斜 显示 ) ,其 默认 值 是 normal。italic 和 oblique 
都 表示 倾斜 ,而 oblique 倾斜 的 幅度 要 大 一 些 。 斜 体 文字 在 网 页 中 的 应 用 也 比较 多 ,多 用 
于 注释 ,说 明 以 及 日 期 等 其 他 附加 信息 。 

网 页 中 可 以 使 用 font-style 属性 设置 文字 样式 ,CSS 示例 代码 如 下 : 





p{font- style: italic;} 

3) 字体 变形 

font-variant 属性 可 以 设 定 小 型 大 写字 母 ,小 型 大 写字 母 不 是 一 般 的 大 写字 母 ,也 不 
是 小 写字 母 ,这 种 字母 采用 不 同 大 小 的 大 写字 母 。 

4) 字体 加 粗 

网 页 中 可 以 使 用 font-weight 属性 设置 文字 的 粗细 ,CSS 示例 代码 如 下 : 


p{font-— weight: normal;} 


font-weight 属性 的 取 值 除了 关键 字 normal、bold、bolder 和 lighter 之 外 ,还 可 以 使 用 
数值 表示 ,将 文字 的 粗细 分 为 9 个 等 级 ,分 别 是 100 一 900, 其 中 100 最 细 ,900 最 粗 。 一般 
400 等 价 于 normal,700 等 价 于 bold。 如 果 将 文字 粗细 设置 为 bolder, 则 浏览 器 会 根据 父 
元 素 的 文字 粗细 ,选择 与 其 最 接近 的 一 种 ,而 且 显 示 为 更 粗 一 些 的 字体 。 如 果 将 文字 粗细 
设置 为 lighter, 则 浏览 器 会 根据 父 元 素 的 文字 粗细 设置 为 较 细 的 字体 。 

5) 字体 大 小 

font-size 属性 设置 文本 的 大 小 ,font-size 值 可 以 是 绝对 值 或 相对 值 。 绝 对 值 是 指 将 
文本 设置 为 指定 的 大 小 ,不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 ,绝对 大 小 在 确定 了 输 
出 的 物理 尺寸 时 很 有 用 。 相 对 大 小 是 指 相 对 于 周围 的 元 素来 设置 大 小 ,允许 用 户 在 浏览 
器 中 改变 文本 的 大 小 。 

当 我 们 不 显 式 定义 网 页 的 字体 大 小 时 ,网 页 文档 标准 字体 大 小 的 默认 值 为 16px 
(16px 二 lem) ,并 且 在 不 同 浏览 器 中 显示 的 效果 是 一 致 的 。 字 体 大 小 的 默认 值 定 为 16px 
是 考虑 到 网 页 的 可 读 性 ,但 是 16px 的 字体 大 小 容易 破坏 页 面 布局 ,影响 页 面 的 美观 度 。 
在 实际 设计 中 ,习惯 适当 减 小 字体 大 小 。 目 前 国内 很 多 网 站 都 将 正文 字体 的 大 小 设置 为 
12px。 由 于 屏幕 分 辨 率 越 来 越 大 ,现在 有 些 网 站 将 正文 字体 大 小 设置 为 14px。 

29 


HTML5+ CSS3 跨 平台 网 页 设计 实例 教程 





定义 字体 大 小 有 多 种 方法 ,包括 使 用 数值 大 小 、 使 用 关键 字 、 使 用 百分比 等 。 其 中 使 
用 数值 大 小 表示 字体 大 小 时 ,需要 使 用 长 度 单位 ,例如 px、pt、em、ex 等 ,一 般 常用 的 是 像 
素 (px) 。 

(1) 使 用 像素 (px) 作 为 单位 设置 文本 大 小 ,可 以 对 文本 大 小 进行 完全 控制 ,示例 代码 
如 下 : 


h2 {font- size:40px;} 
Pp {font- size: 12px;} 


目前 有 许多 网 站 都 是 选用 像素 作为 字体 大 小 的 单位 ,常用 的 字体 大 小 有 9px、10px、 
12px、14px、16px、18px、24px、36px 等 。 对 于 图 文 混 排 的 网 页 ,使 用 像素 更 容易 实现 图 文 
协调 显示 ,因为 图 像 也 是 以 像素 作为 单位 的 。 

(2) 使 用 磅 (pt) 作 为 单位 的 字体 大 小 定义 示例 代码 如 下 : 


p{font- size: 9pt;} 


有 些 网 站 使 用 磅 (pt) 设 置 字体 大 小 。 在 Apple 公司 的 Macintosh 操作 系统 中 , 磅 与 
像素 趋 于 相同 的 效果 ,12pt 与 12px 的 显示 效果 趋 于 相同 。 但 是 在 Microsoft 公司 的 
Windows 操作 系统 中 , 磅 与 像素 的 显示 效果 是 不 同 的 ,对 于 相同 数值 大 小 的 字体 , 磅 要 比 
像素 的 大 些 , 例 如 9pt 的 文字 大 小 与 12px 相当 ,10pt 的 文字 大 小 与 13px 相当 ,12pt 的 文 
字 大 小 与 16px 相当 。 

(3) 可 以 使 用 em 作为 单位 来 设置 字体 大 小 ,如 果 要 避免 在 Internet Explorer 中 无 法 
调整 文本 的 问题 ,许多 开发 者 使 用 em 单位 代替 pixels。W3C 推荐 使 用 em 尺寸 单位 ， 
lem 等 于 当前 的 字体 尺寸 。 如 果 一 个 元 素 的 font-size 为 16 像素 ,那么 对 于 该 元 素 ,1em 
就 等 于 16 像素 。 在 设置 字体 大 小 时 ,em 的 值 会 相对 于 父 元 素 的 字体 大 小 改变 。 浏 览 器 
中 默认 的 文本 大 小 是 16 像素 ,因此 lem 的 默认 尺寸 是 16 像素 ,14px 相当 于 0. 875em， 
12px 相当 于 0.75em,10px 相当 于 0. 625em。 使 用 em 定义 字体 大 小 时 可 以 在 任何 浏览 
器 中 缩放 , 它 同时 也 能 照顾 到 用 户 对 字体 的 偏爱 ,国外 许多 主流 网 站 都 使 用 em 作为 字体 
大 小 单位 。 设 计 网 页 时 ,如 果 在 body 标签 中 定义 页 面 的 字体 大 小 之 后 ,其 他 标签 的 字体 
都 会 随 body 标签 字体 大 小 的 变化 而 变化 ,页 面 控制 就 显得 轻松 。 

可 以 使 用 这 个 公式 将 像素 转换 为 em: pixels/16 二 em。 示 例 代码 如 下 : 


h2 {font- size:2.5em;} /* 40px/16=2.5em* / 
p {font- size:0.875em;} /* 14px/16=0.875em* / 


在 上 面 的 实例 中 ,以 em 为 单位 的 文本 大 小 与 前 一 个 实例 中 以 像素 计 的 文本 是 相同 
的 。 不 过 ,如 果 使 用 em 单位 , 则 可 以 在 所 有 浏览 器 中 调整 文本 大 小 。 

注意 : 16pt 等 于 父 元 素 的 默认 字体 大 小 ,假设 父 元 素 的 {font-size 为 20px, 那 么 公式 
需 改 为 : pixels/20 一 em。 

(4) 使 用 百分比 定义 字体 大 小 的 示例 代码 如 下 : 


pt{font— size: 200% ;} 


30 


单元 2 网 页 中 文本 与 段落 的 应 用 设计 





使 用 百分比 定义 的 字体 大 小 与 em 一 样 ,是 相对 于 父 元 素 的 字体 大 小 来 确定 的 ， 
lem 的 计算 值 等 于 100% 的 计算 值 ,它们 的 显示 效果 是 相同 的 。 字 体 大 小 定义 为 
200% ,相当 于 父 元 素 字 体 大 小 的 2 倍 ,如 果 父 元 素 的 字体 大 小 为 12px, 那 么 子 元 素 的 
字体 大 小 相当 于 24px。 对 于 下 浏览 器 使 用 百分比 定义 字体 大 小 ,可 以 获取 较 好 的 浏 
览 效 果 。 

(5) 使 用 绝对 大 小 的 关键 字 定 义 字体 大 小 的 示例 代码 如 下 : 


p{font- size: large;} 


网 页 中 的 字体 大 小 可 以 使 用 绝对 大 小 的 关键 字 来 定义 ,这 些 关 键 字 包括 xx-small、x- 
small ,small ,medium large、x-large、xx-large。 使 用 关键 字 定义 字体 大 小 可 以 缩放 字体 ， 
这 些 关 键 字 没有 精确 定义 ,但 它们 能 够 根据 一 个 标准 设置 字体 的 绝对 大 小 ,其 中 medium 
是 默认 基准 , 带 有 small 的 关键 字 会 缩小 字体 大 小 , 带 有 large 的 关键 字 会 放大 字体 大 小 。 
根据 CSS2 标准 ,放大 因子 为 1. 2, 缩 小 因子 为 0. 83。 如 果 medium 相当 于 16px, 那 么 
large 相当 于 19px,small 相当 于 13px。 

(6) 使 用 相对 大 小 的 关键 字 定义 字体 大 小 的 示例 代码 如 下 : 


pffont- size: larger;} 


关键 字 larger 和 smaller 可 以 根据 父 元 素 的 字体 大 小 来 确定 子 元 素 当 前 字体 的 大 
小 。 如 果 父 元 素 的 字体 大 小 为 medium, 当 子 元 素 定义 为 larger 时 ,其 字体 大 小 就 相当 于 
large。 实 际 上 不 同 浏览 器 显示 效果 有 些 差异 。 使 用 相对 大 小 关键 字 定 义 字体 大 小 的 最 
大 优势 是 可 以 不 必 约 束 在 绝对 尺寸 的 范围 内 , 它 的 尺寸 可 以 超出 xx-small 和 xx-large 的 
值 范围 ,具有 更 大 的 灵活 性 。 

6) 英文 文字 变形 

网 页 中 可 以 使 用 font-variant 属性 设置 文字 变形 ,CSS 示例 代码 如 下 : 


p{font- variant: small- caps;} 


font-variant 属性 的 取 值 包括 normal 和 small-caps, 其 中 默认 值 为 normal, 表 示 普 通 
文本 ;而 small-caps 表示 小 型 的 大 写字 母 ,一 般 用 来 设置 英文 字母 的 大 小 写 ,不 适合 汉字 
使 用 。 

7) CSS3 @font-face 规则 

在 CSS3 之 前 ,必须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 ,通过 CSS3, 则 可 以 使 用 我 
们 喜欢 的 任意 字体 。 当 我 们 找到 或 购买 到 希望 使 用 的 字体 时 ,可 将 该 字体 文件 存放 到 
Web 服务 器 上 , 它 会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 

我 们 自己 使 用 的 字体 是 在 CSS3 @font-face 规则 中 定义 的 ,在 新 的 @font-face 规则 
中 ,必须 首先 定义 字体 的 名 称 (例如 myFont) ,然后 指向 该 字体 文件 。 如 果 需 要 为 HTML 
元 素 使 用 字体 , 则 通过 font-family 属性 来 引用 字体 的 名 称 myFont。 

以 下 示例 代码 是 使 用 粗 体 字体 的 实例 ,必须 为 粗 体 文本 添加 另 一 个 包含 描述 符 的 @ 


font-face。 


<style> 
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@ font- face 
{ 
font- family: myFont; 
src: url('Sansation Bold.ttf"'), 
url('Sansation Bold.eot'); /* IE9+ */ 
font- weight :bold; 


div 
{ 
font- family:myFont; 
} 
</style> 
上 述 CSS 定义 中 的 文件 Sansation_Bold. ttf 是 另 一 个 字体 文件 , 它 包含 了 Sansation 
字体 的 粗 体 字符 。 只 要 font-family 为 myFont 的 文本 需要 显示 为 粗 体 ,浏览 器 就 会 使 用 
该 字体 。 通 过 这 种 方式 ,我们 可 以 为 相同 的 字体 设置 许多 @font-face 规则 。 


5. CSS 颜色 的 表示 方法 


颜色 是 通过 对 红 , 绿 和 蓝光 的 组 合 来 显示 的 。 

1) 颜色 值 

CSS 颜色 使 用 组 合 了 红 、 绿 、 蓝 颜色 值 (RGB) 的 十 六 进 制 (hex) 表 示 法 进行 定义 。 对 
光源 进行 设置 的 最 低 值 可 以 是 0( 十 六 进 制 00) ,最 高 值 是 255( 十 六 进 制 FF)。 十 六 进 制 
值 使 用 3 个 两 位 数 来 编写 ,并 以 # 符 号 开头 。CSS 常用 颜色 的 HEX 表示 法 与 RGB 表示 
法 如 表 2-3 所 示 。 


表 2-3 CSS 常用 颜色 的 HEX 表示 法 与 RGB 表示 法 

















颜色 HEX 表示 法 颜色 RGB 表示 法 颜色 HEX 表示 法 颜色 RGB 表示 法 
#000000 RGB(0,0,0) #00FFFF RGB(0,255,255) 
提 FF0000 RGB(255,0,0) # FFOOFF RGB(255,0,255) 
#00FF00 RGB(0,255,0) #FFFFFF RGB(255,255,255) 
#0000FF RGB(0,0,255) #CCCCCC RGB(204,204,204) 
#FFFF00 RGB(255,255,0) #COCOCO RGB(192,192,192) 














从 0 到 255 种 红 \ 绿 、 蓝 三 原色 的 值 能 够 组 合 出 总 共 超过 1600 万 种 不 同 的 颜色 (根据 
256X256X256 计算 )。 大 多 数 现代 的 显示 器 都 能 显示 出 至 少 16 384 种 不 同 的 颜色 。 多 
年 前 , 当 计算 机 只 支持 最 多 256 种 颜色 时 ,216 种 “网 络 安全 色 ” 列 表 被 定义 为 Web 标准 ， 
并 保留 了 40 种 固定 的 系统 颜色 。 现 在 ,这 些 都 不 重要 了 ,因为 大 多 数 计算 机 都 能 显示 数 
百 万 种 颜色 。 

2) CSS 中 的 颜色 的 表示 方法 

(1) 十 六 进 制 颜色 。 十 六 进 制 颜色 是 这 样 规定 的 : # RRGGBB, 其 中 的 RR( 红 色 )、 
GG( 绿 色 )、.BB( 蓝 色 ) 十 六 进 制 整数 规定 了 颜色 的 成 分 ,所 有 值 必须 介 于 0 与 FF 之 间 。 
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所 有 浏览 器 都 支持 十 六 进 制 颜色 值 。 例 如 ,并 0000ff 值 显示 为 蓝 色 ,这 是 因为 蓝 色 成 分 被 
设置 为 最 高 值 (ff ,而 其 他 成 分 被 设置 为 0。 

(2) RGB 颜色 。RGB 颜色 值 的 表示 方式 为 : RGB(red，green，blue) ,每 个 参数 
(Cred green 以 及 blue) 定 义 颜 色 的 强度 ,可 以 是 介 于 0 一 255 的 整数 ,或 者 是 百分比 值 ( 从 
0%% 一 100 交 )。 所 有 浏览 器 都 支持 RGB 颜色 值 。 例 如 ,RGB(0,0,255) 值 显示 为 蓝 色 , 这 
是 因为 blue 参数 被 设置 为 最 高 值 (255) ,而 其 他 被 设置 为 0。 同样 地 ,以 下 两 种 表示 方式 
定义 了 相同 的 颜色 : RGB(0,0,255) 和 RGB(0% ,0% ,100%)。 

(3) RGBA 颜色 。RGBA 颜色 值 是 RGB 颜色 值 的 扩展 , 带 有 一 个 alpha 通道 ( 它 规 
定 了 对 象 的 不 透明 度 )。RGBA 颜色 值 的 表示 方式 为 : RGBa(red, green,， blue, alpha)， 
其 中 alpha 参数 是 介 于 0.0( 完 全 透明 ) 与 1.0( 完 全 不 透明 ) 的 数字 。RGBA 颜色 值得 到 
以 下 浏览 器 的 支持 ; IE9 十 、Firefox 3 十 .Chrome、Safari 以 及 Opera 10 十 。 例 如 ,RGBa 
(255,0,0,0.5) 值 显示 为 红色 ,不 透明 度 为 0. 5。 

(4) HSL 颜色 。HSL 指 的 是 hue (色调 )、saturation (饱和 度 )、lightness (亮度 )。 
HSL 颜色 值 的 表示 方式 为 : HSL (hue，saturation，lightness), 例 如, HSL (120,65%， 
75%)。Hue 是 色 盘 上 的 度数 (从 0 一 360) ,0( 或 360) 是 红色 ,120 是 绿色 ,240 是 蓝 色 ; 
Saturation 是 百分比 值 ;0 意味 着 灰色 ,而 100% 是 全 彩 ;Lightness 同样 是 百分比 值 ,0 是 
黑色 ,100% 是 白色 。HSL 颜色 值得 到 以 下 浏览 器 的 支持 : IE9 十 、 Firefox、Chrome、 
Safari 以 及 Opera 10 十 。 

(5) HSLA 颜色 。HSLA 颜色 值 是 HSL 颜色 值 的 扩展 , 带 有 一 个 alpha 通道 ( 它 规 
定 了 对 象 的 不 透明 度 )。HSLA 颜色 值 表示 方式 为 : HSLa(hue, saturation, lightness， 
alpha) ,其 中 的 alpha 参数 定义 不 透明 度 ,alpha 参数 是 介 于 0. 0( 完 全 透明 ) 与 1. 0( 完 全 不 
透明 ) 的 数字 。 例 如 : HSLa(120,65%,75% ,0.3)。HSLA 颜色 值得 到 以 下 浏览 器 的 支 
持 : IE9 十 Firefox 3 十 .Chrome、Safari 以 及 Opera 10 十 。 

(6) 预定 义 / 跨 浏 览 器 颜色 名 。HTML 和 CSS 颜色 规范 中 定义 了 147 种 颜色 名 
(17 种 标准 颜色 加 130 种 其 他 颜色 )。17 种 标准 色 分 别 是 aqua、 black、blue、 fuchsia、 
gray green \lime .maroon navy,olive,orange, purple, red silver ,teal、 white yellow。 这 
是 所 有 浏览 器 都 支持 的 颜色 名 。 

设计 网 页 时 ,可 以 为 文字 、 超 链接 .已 访问 的 超 链 接 和 当前 活动 超 链接 设置 各 种 颜色 。 
使 用 Dreamweaver CC 制作 网 页 ,默认 的 正常 文字 的 颜色 为 黑色 ,默认 链接 的 文字 颜色 为 
蓝 色 , 单 击 链接 之 后 的 文字 颜色 为 紫红 色 。 

可 以 使 用 color 属性 设计 文字 颜色 ,CSS 示例 代码 如 下 : 


p{color: #c60;} 


网 页 中 颜色 的 运用 能 够 使 想 要 强调 的 文字 更 加 引 人 注 目 。 设 置 文字 颜色 的 首要 原则 
是 可 读 性 ,前 景色 与 背景 色 对 比 度 要 大 ,避免 为 了 追求 个 性 化 而 导致 文字 颜色 不 醒目 ,使 
可 读 性 降低 。 在 保证 可 读 性 的 基础 上 ,可 以 适当 设置 柔和 的 文字 颜色 ,尽量 少 用 大 片 纯 
色 , 例 如 纯 黑 、 纯 红 或 纯 蓝 。 
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6. CSS 多 列 属性 (Multi-column) 


通过 CSS3, 可 以 创建 多 个 列 来 对 文本 进行 布局 ,就 像 报纸 那样 。column-count 属性 
用 于 设置 元 素 应 该 被 分 隔 的 列 数 。 
把 div 元 素 中 的 文本 分 隔 为 三 列 的 示例 代码 如 下 : 
div 
{ 
—moz- column- count :3; /* Firefoxx / 
— webkit- column- count:37 /* Safari 和 Chrome* / 
Column- count :3; 


} 


column-gap 属性 用 于 设置 列 之 间 的 间隔 ,规定 列 之 间 40 像素 的 间隔 的 示例 代码 
如 下 : 
div 
{ 
column- count: 3; 


—moz- column- gap:40px; /* Firefox* / 


-Webkit- column- gap:40px; /* Safari 和 Chromex / 
Column- gap: 40px; 
} 


多 列 文本 在 I 浏览 器 中 的 浏览 效果 如 图 2-1 所 示 。 
阿 项 概况 


带 、 寒 珊 ， 呈 明 总 的 委 直 性 : 
ee 阿坝 省 的 九 等 沟 ， en 自然 过 产 .人 
与 生物 本 保护 区 : 和 2 可 持续 发 展 旅游 的 保护 
级 桂冠 的 风景 区 。 独特 的 藏 杰 、 关 族 民 族 风 
过 ER 了 起 未 把 多 的 中 外 洲 。 


地 理 位 置 ， 
Pie Fe 
四 北部 ， 让 部 与 至: 
南西 三 面 施 别 j 与 成 部、 综 阳 、 德 阳 、 


行政 区 划 ， 辖 3 介 康 、 全 咱 、 小 合 、 阿 坝 、 若 尔 盖 、 红 


图 2-1 多 列 文本 在 下 浏览 器 中 的 浏览 效果 


阿 和 
el 人 
人 相 争 ， 








column-rule 属性 用 于 设置 列 之 间 的 宽度 .样式 和 颜色 规则 ,示例 代码 如 下 : 
div 
{ 
—moz- column- rule:3px outset #£f0000; /x Firefox* / 
一 webkit- column- rule: 3px outset # ££0000; /* Safari and Chrome* / 
column- rule:3px outset # ff00007 


7. 定义 CSS 属性 时 经 常 使 用 的 长 度 单位 


定义 CSS 属性 时 ,所 有 长 度 的 单位 都 可 以 为 正 数 或 负数 加 上 一 个 合适 的 单位 来 表 
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示 , 有 的 属性 只 能 为 正 数值 。 长 度 单 位 分 为 两 大 类 : 绝对 单位 和 相对 单位 。 

1) 绝对 单位 

绝对 单位 主要 包括 英寸 (in) 厘米 (cm) 毫米 (mm) 、 磅 (pt 和 pica(pc)。 其 中 磅 在 印 
刷 领 域 中 广泛 使 用 (1 英寸 =72 磅 ),CSS 中 也 常用 pt 设置 字体 大 小 ,12 磅 的 字体 等 于 
1/6 英寸 大 小 。pica 也 在 印刷 领域 中 使 用 (1pica 一 12 磅 ) 。 

2) 相对 单位 

相对 长 度 单位 的 长 短 取决 于 参照 物 , 例 如 会 受 屏幕 分 辩 率 .可 视 区 域 宽度 .浏览 器 设 
置 等 多 种 因素 影响 。 

主要 有 3 种 相对 长 度 单位 : 元 素 的 字体 高 度 (em) ,字母 x 的 高 度 (ex) 和 像素 (px) 。 

(1) em。em 表示 元 素 的 字体 高 度 , 它 能 够 根据 字体 的 font-size 属性 值 来 确定 单位 
的 大 小 ,例如 : 


pt{ 
font- size: 12px; 
line- height: 2em; 
text- indent: 2em; 


} 


由 于 一 个 em 等 于 font-size 的 属性 值 ,上 述 代码 中 font-size 的 属性 值 设置 为 12px， 
即 lem 王 12px, 则 行 高 line-height 为 2em, 即 等 于 24px; 文 字 缩 进 text-indent 为 2em, 也 
等 于 24px。 

不 管 font-size 的 属性 值 设置 成 什么 ,lem 总 是 等 于 对 应 元 素 给 定 字 体 的 font-size 
值 。 如 果 将 font-size 的 属性 值 设置 为 14px, 即 lem 二 14px, 则 行 高 line-height 为 2em, 即 
等 于 28px。 

如 果 font-size 的 属性 值 的 单位 也 设置 为 em,' 则 em 的 值 将 根据 其 父 元 素 的 font-size 
的 属性 值 来 确定 。 

提示 : 中 文 的 首 行 有 缩 进 两 个 汉字 的 习惯 ,相当 于 插入 两 个 汉字 宽度 的 空格 。 可 以 
通过 定义 文字 缩 进 样式 实现 两 个 汉字 的 缩 进 。 如 果 文字 大 小 为 12px, 则 定义 文本 缩 进 为 
24px 即 可 。 但 是 改变 了 文字 的 大 小 ,这 时 的 文本 缩 进 也 许 就 不 合适 了 。 正 确 的 方法 是 使 
用 相对 长 度 单 位 em 定义 缩 进 值 更 合适 ,设置 文本 缩 进 为 2em, 不 管 文 本 大 小 是 多 少 ,将 
始终 保持 文本 缩 进 为 两 个 汉字 的 宽度 。 

(2) ex。ex 是 以 小 写字 母 x 为 基准 的 单位 ,不 同 的 字体 会 有 不 同 的 x 高度, 因此 即使 
font-size 相同 而 字体 不 同 ,1ex 表示 的 值 也 会 不 同 。 

(3) px。px 是 根据 屏幕 像素 点 来 确定 的 。 像 素 指 的 是 显示 器 上 的 小 点 ,CSS 规范 中 
假设 1 英寸 等 于 90 像素 。 目 前 大 多 数 的 网 页 设计 者 倾向 于 使 用 px 作为 单位 ,因为 在 大 
多 数 显示 器 上 看 到 的 效果 会 比较 统一 。 实 际 上 浏览 器 会 使 用 显示 器 的 实际 像素 值 ,不 同 
的 显示 分 辩 率 会 使 相同 取 值 的 px 单位 所 显示 出 来 的 效果 会 有 所 不 同 。 

(4) 百分比 。 百 分 比 也 是 一 个 相对 单位 ,百分比 值 总 是 通过 另 一 个 值 来 计算 ,一 般 参 
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考 父 对 象 中 相同 属性 的 值 。 例 如 ,如 果 父 元 素 的 宽度 为 960px, 子 元 素 的 宽度 为 50%, 则 
子 元 素 的 实际 宽度 为 480px。 

提示 : 长 度 为 0 的 值 不 需要 单位 。 无 论 什 么 单位 ,0 就 是 0, 如 0px、0pt、0in 用 0 表示 
即 可 。 


8. 网 页 中 多 重 样式 的 应 用 


如 果 网 页 中 某 些 属性 在 不 同 的 样式 表 中 被 同样 的 选择 器 定义 ,那么 属性 值 将 被 继承 
过 来 。 
例如 ,外 部 样式 表 拥 有 针对 h3 选择 器 的 三 个 属性 ,代码 如 下 : 





h3 { 
color: red; 
text- align: left; 
font- size: 8pt; 
} 
而 内 部 样式 表 拥 有 针对 h3 选择 器 的 两 个 属性 ,代码 如 下 : 


h3 { 
text- align: right; 
font- size: 20pt; 
} 
假如 拥有 内 部 样式 表 的 这 个 页 面 同时 与 外 部 样式 表 链 接 ,那么 h3 得 到 的 样式 
如 下 : 


color: red; text- align: right; font- size: 20pt; 


即 颜色 属 性 将 被 继承 于 外 部 样式 表 , 而 文字 排列 (text-alignment) 和 字体 尺寸 (font- 
size) 会 被 内 部 样式 表 中 的 规则 取代 。 


9. 标记 -m0z-、-webkit- 、-0- 和 -ms- 的 解释 


(1) -moz-: 以 -moz- 开 头 的 样式 代表 Firefox 浏览 器 特有 的 属性 ,只 有 Webkit 浏览 器 
可 以 解析 。moz 是 Mozilla 的 缩写 。 

(2) -webkit-: 以 -webkit- 开 头 的 样式 代表 WebKit 浏览 器 特有 的 属性 ,只 有 WebKit 
浏览 器 可 以 解析 。WebKit 是 一 个 开源 的 浏览 器 引擎 ,Chrome、 Safari 浏览 器 即 采 用 
WebKit 内 核 。 

(3) -o-: 以 -o- 开 头 的 样式 代表 Opera 浏览 器 特有 的 属性 ,只 有 Opera 浏览 器 可 以 
解析 。 

(4) -ms-: 以 -ms- 开 头 的 样式 代表 正 浏览 器 特有 的 属性 ,只 有 正 浏 览 器 可 以 
解析 。 
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【引导 训练 】 
任务 2-1 制作 阿坝 概况 的 文本 网 页 


本 任务 的 主要 目标 如 下 : 制作 一 个 纯 文本 的 网 页 0201. html, 介 绍 阿 坝 藏族 羌族 自治 
州 的 地 理 位 置 . 行 政 区 划 、 气 候 资源 和 生态 资源 。 
网 页 0201. html 的 浏览 效果 如 图 2-2 所 示 。 


阿坝 概况 
地 理 位 置 : 


阿坝 藏族 羌族 自治 州 地 处 青藏 高 原 东 南 红 ， 模 断 山 芒 北 堵 与 川 酉 北 高 山峡 佑 的 接合 部 , 位 于 四 川 省 西北 部 ， 
紧邻 成 都 平原 ， 北 部 与 青海 、 甘 肃 省 相 邻 ， 东 南西 三 面 分 别 与 成 都 、 绵 阳 、 和 德阳、 雅安 、 甘 孜 等 市 州 接壤 。 





行政 区 划 : 

辖 马 尔 康 、 金 川 、 小金 、 阿 坝 、 若 尔 鞋 、 红 原 、 壤 塘 、 汶 川 、 理 县 、 茂 县 、 松 潘 、 九 素 沟 、 黑 水 13 县 ，224 个 
乡镇。 
气候 资源 : 

ot 再 北 部 的 丘 杭 高 原 冬季 严寒 漫长 ， 夏 和 李 凉 察 还 润 ， 年 平均 

pb 4.3C。 山 原 地 带 夏 李 温 凉 ， 冬 春 寒冷 ， 于 慢 季 明显 ， 年 乎 均 气温 5.6~8.9C。 高 山峡 谷地 带 ， 随 着 海 
所 高 度 变化 ， 气候 从 亚热带 到 温带 、 和 寒带 ， 呈 明星 的 至 直 性 差异 。 
生态 资源 : 


阿坝 州 的 万 塞 沟 、 黄 龙 是 集 世 界 自 然 遗 产 、 人 与 生物 围 保护 区 和 “绿色 环球 21” 可 持续 发 展 旅游 的 保护 区 三 
项 顶级 桂冠 的 风景 区 。 狸 特 的 藏族 、 芜 族 民族 风情 ， 神 秘 的 藏 传 佛教 文化 吸引 了 越 来 越 多 的 中 外 游客 。 








2-2 ”网 页 0201. html 的 浏览 效果 


【任务 冀 述 】 


任务 2-1-1 建立 站 点 及 其 目录 结构 

(1) 创建 站 点 “单元 2”。 

(2) 在 站 点 “单元 2” 中 建立 文件 夹 “0201”。 

(3) 在 文件 夹 “0201” 中 建立 子 文件 夹 “text”。 

任务 2-1-2 创建 与 保存 网 页 文档 0201. html 

先 新 建 一 个 网 页 文档 ,然后 将 新 建 的 网 页 文档 保存 在 文件 夹 “0201” 中 ,命名 为 “0201. 
html”。 

任务 2-1-3 设置 网 页 的 首选 项 

(1) 设置 启动 Dreamweaver CC 时 不 再 显示 欢迎 屏幕 。 

(2) 设置 新 建 网 页 文档 的 默认 扩展 名 为 “. html”, 默认 文 档 类 型 为 HTML5 ,默认 编 
码 为 Unicode (UTF-8)。 

(3) 设置 复制 文本 时 的 参数 为 “ 带 结构 的 文本 以 及 全 部 格式 ( 粗 体 、 斜 体 、 样 式 )”。 
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任务 2-1-4 设置 页 面 的 整体 属性 

(1) 网 页 的 “外 观 ” 属 性 设置 要 求 。 网 页 的 “页 面 字体 ”设置 为 “仿宋 ”;“ 大 小 ”设置 为 
14px;“ 背 景 颜色 ” 设 园 为 *# DDF4FC”; “左边 距 ” 和 “右边 距 ” 设 置 为 30px;“ 上 边 距 ”和 
“下 过 距 ” 设 置 为 10px。 

(2) 网 页 的 “链接 ”属性 设置 要 求 。 网 页 的 链接 字体 设置 为 “宋体 ”, 大 小 为 14px, 链 
接 颜 色 为 blue ,变换 图 像 链接 的 颜色 为 aqua, 已 访问 链接 的 颜色 为 olive, 活 动 链接 的 颜色 
为 red, 下 画 线 样式 为 “ 仅 在 变换 图 像 时 显示 下 画 线 ”。 

(3) 网 页 的 “标题 "属性 设置 要 求 。 将 网 页 的 标题 字体 设置 为 黑体”。 标 题 1 的 大 小 
为 24px, 颜 色 为 “# 0000FF”; 标 题 2 的 大 小 为 18px, 颜 色 为 “#FF00OFF”; 标 题 3 的 大 小 
为 14px, 颜 色 为 black。 

(4) 网 页 的 “标题 /编码 ”属性 设置 要 求 。 网 页 的 标题 设置 为 “阿坝 概况 ”, 文 档 类 型 为 
HTML5 ,编码 为 Unicode (UTF-8)。 

任务 2-1-5 在 网 页 中 输入 文字 

在 网 页 中 输入 2 个 标题 和 2 段 正文 文字 。 

任务 2-1-6 输入 与 编辑 网 页 中 的 文本 

(1) 输入 “行政 区 划 : ”及 相关 内 容 。 

(2) 输入 “气候 资源 : ”及 相关 内 容 。 

(3) 输入 “生态 资源 : ”及 相关 内 容 。 

在 输入 文本 过 程 中 注意 换行 和 输入 合适 的 空格 ,同时 对 输入 的 文本 进行 编辑 ,以 保证 
准确 无 误 。 

任务 2-1-7 格式 化 网 页 文本 

(1) 将 网 页 的 文本 标题 “阿坝 概况 ”的 格式 设置 为 “标题 1”, 并 在 网 页 中 居中 对 齐 。 

(2) 将 网 页 的 段落 标题 地理 位 置 : “行政 区 划 : “气候 资源 : "和 “生态 资源 : ”的 格 
式 设置 为 “标题 2”。 

任务 2-1-8 设置 超 链接 与 浏览 网 页 效果 

(1) 在 网 页 0201. html 中 将 “阿坝 藏族 羌族 自治 州 ”设置 为 超 链 接 。 

(2) 在 浏览 器 中 浏览 网 页 0201. html 的 效果 。 

任务 2-1-9 在 【代码 了 视图 中 查看 CSS 代码 和 HTML 代码 

(1) 切换 到 “代码 ”视图 。 

(2) 在 “代码 ”视图 中 查看 CSS 代码 和 HTML 代码 。 


【任务 误 施 】 
任务 2-1-1 建立 站 点 及 其 目录 结构 


1. 创建 所 需 的 文件 夹 
在 文件 夹 *HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit02 。 
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2. 启动 Dreamweaver CC 


在 Windows 的 [开始 ] 菜 单 中 选择 【程序 >Adobe Dreamweaver CC 菜单 命令 , 即 可 
启动 Dreamweaver CC。 


3. 创建 站 点 
创建 一 个 名 称 为 “单元 2” 的 本 地 站 点 ,站 点 文件 夹 为 Unit02。 
4. 建立 子 文件 夹 *0201” 


在 [文件 3 面板 中 站 点 根 目录 Unit02 上 右 击 ,然后 在 弹出 的 快捷 菜单 中 选择 【新 建文 
件 夹 3 命 令 , 如 图 2-3 所 示 。 此 时 会 建立 一 个 名 称 为 untitled 的 文件 夹 , 如 图 2-4 所 示 ,将 
文件 夹 名 称 重 命名 为 “0201”, 如 图 2-5 所 示 。 





图 2-3 【新 建文 件 夹 ] 快 捷 菜单 图 2-4 创建 文件 夹 的 默认 名 称 


5. 建立 子 文件 夹 “text” 


在 [文件 3 面板 中 创建 好 的 文件 夹 “0201" 上 古 击 ,在 弹出 的 快捷 菜单 中 选择 [新 建文 件 
夹 ] 命 令 , 然 后 将 文件 夹 名 称 修改 为 “text" 即 可 ,结果 如 图 2-6 所 示 。 切 换 到 Windows【 资 
源 管理 器 ] 中 观察 刚才 所 创建 的 文件 夹 ,如 图 2-7 所 示 。 


图 2-5 新 建 子 文件 夹 “0201” 图 2-6 新建 子 文件 夹 “text” 








图 2-7 Windows【 资 源 管理 器 ] 中 新 建 的 文件 夹 结构 39 
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任务 2-1-2 创建 与 保存 网 页 文档 0201. html 


1. 创建 网 页 文档 


在 Dreamweaver CC 主 界面 中 ,选择 [文件 ]>【 新 建 3 命 令 , 弹 出 [新 建文 档 ] 对 话 框 ， 
在 最 左 侧 默认 选中 了 [新建 文档】 在 【文档 类 型 列表 框 中 默认 选中 了 “HTMIL”, 在 【 框 
架 ] 中 默认 选中 了 “二 无 二 >”, 如 图 2-8 所 示 。 这 里 直接 单 击 【创建 3 按钮 , 此 时 在 
Dreamweaver CC 的 文档 窗口 区 域 创 建 了 一 个 名 称 为 Untitled-1 的 网 页 文档 。 








图 2-8 【新 建文 档 ] 对 话 框 


提示 : 也 可 以 直接 在 [文件 面板 中 利用 快捷 菜单 新 建 网 页 文档 。 
2. 保存 网 页 文档 


在 Dreamweaver CC 主 界面 中 选择 [文件 >【 保 存 ] 命 令 , 弹 出 如 图 2-9 所 示 的 【另存 
为 ] 对 话 框 ,在 该 对 话 框 中 输入 网 页 文档 的 名 称 0201. html, 然 后 单 击 【 保 存 ] 按 钮 ,新 建 的 
网 页 文档 便 会 以 名 称 0201. html 保存 在 对 应 的 文件 夹 “0201” 中 ,这 样 便 创建 了 一 个 空白 
的 网 页 文档 。 

提示 : 也 可 以 直接 单 击 【标准 ] 工 具 栏 中 的 [保存 3 按 钳 识 或 [全 部 保存 按钮 区 进行 保 
存 , 后 面 将 会 应 用 此 方法 快速 进行 保存 。 


任务 2-1-3 设置 网 页 的 首选 项 


为 了 更 好 地 使 用 Dreamweaver CC, 建 议 在 使 用 之 前 ,首先 根据 自己 的 工作 方式 和 爱 
好 进行 相关 参数 的 设置 。 
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园 另存 为 
< ~ 个 加 < Unito2 > 0201 > v 也 | | 提 过 "0201” 站 
组 织 ”新 建文 件 夫 Er ©@ 
国 阔 SE 
in 中 tea 
小 音乐 国 
渤 本 地 磁盘 (C:) 
> < > 
文件 名 (N): |0201.html ~ 
保存 类 型 (T): |All Documents ("htm;".html;",shtm;",shtml;*.xhtmb;",stm;",.ssi;"js;"json;".appcach: ~ 
~ 隐 疯 文件 夫 





图 2-9 【另存 为 ] 对 话 框 


1. 打开 【首选 项 ] 对 话 框 


在 Dreamweaver CC 主 界面 中 ,选择 [编辑 ]>【 首 选项 命令 或 者 使 用 快捷 键 Ctrl 十 
U, 即 可 打开 【首选 项 对话 框 ,如 图 2-10 所 示 。 

【首选 项 ] 对 话 框 左边 的 [分 类 列表 中 列 出 了 多 种 类 别 ,选择 一 种 类 别 后 ,该 类 别 中 所 
有 可 用 的 选项 将 会 显示 在 对 话 框 的 右边 参数 设置 区 域 。 根 据 需 要 修改 参数 并 单 击 【 确 定 】 
按钮 , 即 可 完成 参数 的 设置 。 


首选 项 x 








2-10 【首选 项 ] 对 话 框 
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2. 设置 启动 Dreamweaver CC 时 不 再 显示 起 始 页 


打开 【首选 项 对话 框 后 ,在 该 对 话 框 的 左边 的 【分 类 列表 中 选择 【常规 选项 ,如 
图 2-10 所 示 ,取消 右 侧 [文档 选 项 ] 组 中 的 【显示 欢迎 屏幕 】 复 选 框 辆 的 选中 状态 ,然后 单 
击 【确定 按钮。 下 次 启动 Dreamweaver CC 时 将 不 再 显示 起 始 页 。 


3. 设置 新 建 网 页 文档 的 默认 扩展 名 为 “. html”, 默 认 编码 为 Unicode (UTF-8) 


打开 [首选 项 对 话 框 后 ,在 该 对 话 框 的 左边 的 [分 类 了 列表 中 选择 【新 建文 档 ] 选 项 , 然 
后 在 右边 设置 [默认 文档 为 "HTML” ,设置 [ 默 认 扩 展 名 了 为 “. html”, 设 置 [默认 文档 类 
型 为 "HTML5”, 设 置 【默认 编码 了 为 Unicode (UTF-8) 即 可 ,如 图 2-11 所 示 。 








图 2-11 设置 新 建文 档 的 参数 


4. 设置 “复制 /粘贴 "参数 


打开 [首选 项 ] 对 话 框 后 ,在 该 对 话 框 左边 的 [分 类 】 列 表 中 选择 【复制 /粘贴 3 选项 ,如 
2-12 所 示 。 然 后 在 右边 选中 带 结构 的 文本 以 及 全 部 格式 ( 粗 体 、 斜 体 、 样 式 )】 单 选 按 
钮 即 可 。 在 【复制 /粘贴 3 选项 中 ,还 可 以 设置 “复制 /粘贴 ?时 是 否 保留 换行 符 、 是 否 清理 
Word 段落 间距 等 。 

“首选 项 ”设置 完成 后 , 单 击 【 确 定 ] 按 钮 即 可 。 


任务 2-1-4 设置 页 面 的 整体 属性 


网 页 的 页 面 属性 可 以 控制 网 页 的 标题 .背景 颜色 .背景 图 片 .文本 颜色 等 ,主要 对 外 观 
进行 整体 上 的 控制 ,以 保证 页 面 属 性 的 一 致 性 。 
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图 2-12 设置 “复制 /粘贴 ”属性 


1. 打开 【页 面 属性 ] 对 话 框 


在 Dreamweaver CC 主 窗口 中 ,选择 [文件 ]>【 页 面 属性 命令 或 者 在 [属性 面板 中 
单 击 【页 面 属性 按钮 ,都 可 以 打开 【页面 属性 ] 对 话 框 ,如 图 2-13 所 示 。 








2-13 【页 面 属性 ] 对 话 框 


在 【页 面 属性 对话 框 左边 的 [分 类 3 列表 中 列 出 了 6 种 不 同 的 类 别 ,选择 一 种 类 别 后 ， 
该 类 别 中 所 有 可 用 的 选项 将 会 显示 在 对 话 框 右边 的 属性 参数 设置 区 域 。 根 据 需 要 修改 相 
应 类 别 的 属性 参数 并 单 击 【确定 ] 按 钮 或 【应 用 3 按钮 即 可 完成 页 面 属性 的 设置 。 
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2. 设置 [外 观 ] 属 性 


(1) 左边 【分 类 3 列表 中 选择 “外 观 (CSS)”。 

(2) 设置 页 面 字体 。 

从 【页 面 字体 J 下 拉 列 表 框 中 选择 “仿宋 ”作为 页 面 中 的 默认 文本 字体 。 

如 果 【 字 体 下 拉 列 表 框 中 没有 列 出 所 需 的 字体 ,可 以 单 击 列表 框 中 的 最 后 一 项 
【管理 字体 . . . 】 ,打开 [管理 字体 3 对 话 框 ,切换 到 [ 自 定义 字体 堆栈 】 选 项 卡 , 在 该 选项 
卡 的 [可 用 字体 ] 列 表 框 中 选取 “仿宋 ”, 然 后 单 击 对 掖 钮 ,也 可 以 在 【可 用 字体 ] 列 表 
框 中 直接 双击 所 需 字 体 ,【 选 择 的 字体 3 和 【字体 列表 】 列 表 框 便 会 出 现 该 字体 ,如 


图 2-14 所 示 。 然 后 单 击 【确定 按钮 ,刚才 所 选取 的 字体 便 会 出 现在 【字体 列表 了 中 ,如 
图 2-15 所 示 。 





2-14 在 【管理 字体 ] 对 话 框 的 [可 用 字体 ] 列 表 中 选择 “仿宋 ” 


(3) 设置 页 面 字 体 的 大 小 。 

从 字体 【大 小 ] 列 表 框 中 单 击 选择 14, 其 单位 为 “像素 (px)”。 

(4) 设置 网 页 的 背景 颜色 。 

一 般 情 况 下 ,背景 颜色 都 设置 成 白色 。 如 果 不 设置 背 景 颜 色 ,常用 的 浏览 器 也 会 默认 
为 网 页 的 背景 颜色 为 白色 。 为 了 增强 网 页 背景 效果 ,可 以 对 背景 颜色 进行 设置 。 

提示 : 文本 颜色 的 设置 方法 与 背景 颜色 的 设置 方法 相同 。 
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页 属性 X 





图 2-15 字体 列表 


(5) 设置 页 面 边 距 。 

在 【左边 距 ] 文 本 框 中 输入 网 页 左边 空白 的 宽度 : 30px, 表 示 网 页 内 容 的 左边 起 始 位 
置 距 浏览 器 左边 框 为 30 像素 。 在 【右边 距 】 文 本 框 中 输入 网 页 右边 空白 的 宽度 : 30px, 表 
示 网 页 内 容 的 右边 末尾 位 置 距 浏 览 器 右边 框 为 30 像素 。 按 相同 方法 将 [上边 距 ] 和 【下 边 
距 】 设 置 为 10px。 

(6) 设置 背景 图 像 。 

在 [页面 属性 对话 框 中 也 可 以 设置 网 页 的 “背景 图 像 ”, 其 方法 是 : 在 【背景 图 像 ] 文 
本 框 中 输入 网 页 背景 图 像 的 路 径 和 名 称 ,这 里 最 好 输入 相对 路 径 ,不 要 使 用 绝对 路 径 。 也 
可 以 单 击 文本 框 右边 的 [浏览 按钮 ,然后 弹出 【选择 图 像 源 文件 ] 对 话 框 ,在 该 对 话 框 中 选 
择 图 像 文 件 作为 网 页 的 背景 图 像 , 最 后 单 击 [ 确 定 了 按钮 即 可 。 

使 用 图 像 作 背景 时 ,可 以 在 【重复 了 下拉 列 表 框 选择 背景 图 像 的 重复 方式 ,其 选项 包括 
repeat repeat-x repeat-y 和 no-repeat。 

【外 观 了 属性 的 设置 值 如 图 2-16 所 示 。 此 时 单 击 【 确 定 ] 按 钮 或 者 [应 用 按钮 , 即 可 完 
成 [外 观 ] 属 性 的 设置 。 





图 2-16 在 [页面 属性 ] 对 话 框 中 设置 页 面 的 [外 观 ] 属 性 
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3. 设置 [链接 属性 


(1) 打开 【页面 属性 ] 对 话 框 。 

(2) 在 左边 【分 类 3】 列表 框 中 选择 “链接 (CSS)”。 

(3) 在 【链接 字体 列表 框 中 选择 “宋体 ”, 如 果 【 字 体 ] 下 拉 列 表 框 中 没有 列 出 所 需 的 
字体 ,可 以 单 击 最 后 一 项 【管理 字体 . . .了 ,添加 所 需 的 字体 。 

(4) 在 【大 小 ] 列 表 框 中 选择 14 ,单位 默认 为 “像素 (px)”。 

(5) 在 【链接 颜色 】 文 本 框 中 输入 blue。 

(6) 在 【变换 图 像 链接 】 文 本 框 中 输入 aqua。 

(7) 在 【已 访问 链接 ] 文 本 框 中 输入 olive。 

(8) 在 【活动 链接 】 文 本 框 中 输入 red。 

(9) 在 [下面 线 样式 ] 列 表 框 中 选择 “ 仅 在 变换 图 像 时 显示 下 面 线 ”。 

【链接 了 属性 的 设置 值 如 图 2-17 所 示 。 此 时 单 击 [确定 了 按钮 或 者 [应 用 按钮 , 即 可 完 
成 链接 属性 的 设置 。 





图 2-17 在 【页 面 属 性 ] 对 话 框 中 设置 页 面 的 [链接 了 属性 


4. 设置 [标题 】 属 性 


(1) 打开 [页面 属 性 ] 对 话 框 ,左边 [分类] 列表 中 选择 “标题 (CSS)”。 

(2) 在 【标题 字体 3 列表 框 中 选择 “黑体 ”, 如 果 【 字 体 ] 下 拉 列 表 框 中 没有 列 出 所 需 的 
字体 ,可 以 单 击 列表 框 中 的 最 后 一 项 “编辑 字体 列表 . . . ”, 添 加 所 需 的 字体 。 

(3) 在 “标题 1” 的 [大小] 列表 框 中 选择 24, 单 位 默认 为 “px( 像 素 )” 民 颜色 】 文 本 框 中 
输入 “#0000FF”。 

(4) 在 “标题 2” 的 [大 小 ] 列 表 框 中 选择 18, 单 位 默认 为 “px( 像 素 )”,【 颜 色 ] 文 本 框 中 
输入 “#FFO0FF”。 

(5) 在 “标题 3” 的 [大小] 列表 框 中 选择 14, 单 位 默认 为 “px( 像 素 )”, 颜 色 文本 框 中 输 
人 和信“Black”。 

标题 属性 的 设置 值 如 图 2-18 所 示 , 其 他 “标题 ”的 设置 方法 类 似 。 此 时 单 击 【确定 ] 按 
钮 或 者 [应用] 按钮 , 即 可 完成 标题 属性 的 设置 。 
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图 2-18 在 [页 面 属性 ] 对 话 框 中 设置 页 面 的 [标题 ] 属 性 


5. 设置 [标题 /编码 ] 属 性 


【标题 /编码 3 选项 用 于 设置 网 页 标题 和 文字 编码 等 属性 。 网 页 标题 可 以 是 中 文英 文 
或 其 他 符号 , 它 显示 在 浏览 器 的 标题 栏 位 置 。 当 网 页 被 加 入 收藏 夹 时 ,网 页 标题 又 作为 网 
页 的 名 字 出 现在 收藏 夹 中 。 

(1) 打开 [页 面 属性 ] 对 话 框 ,左边 [分 类 ] 列 表 中 选择 [标题 /编码 】。 

(2) 在 [标题 ] 文 本 框 中 输入 “阿坝 概况 ”。 

(3) 在 [文档 类 型 3 列表 框 中 选择 HTML5。 

(4) 在 【编码 列表 框 中 选择 Unicode (UTF-8)。 

【标题 /编码 ] 届 性 的 设置 值 如 图 2-19 所 示 , 此 时 单 击 【确定 3 按钮 或 者 [应 用 按钮 , 即 
可 完成 [标题 /编码 了 属性 的 设置 。 





图 2-19 在 【页面 属性 ] 对 话 框 中 设置 页 面 的 [标题 /编码 ] 属 性 


提示 : 在 【页 面 属性 】 对 话 框 中 也 可 以 设置 页 面 的 【跟踪 图 像 】 属 性 ,在 正式 制作 网 页 
之 前 ,可 以 先 绘制 一 幅 网 页 设计 草图 ,Dreamweaver CC 可 以 将 这 种 草图 设置 成 跟踪 图 
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像 , 作 为 辅助 的 背景 ,用 于 引导 网 页 的 设计 。 跟 踪 图 像 的 文件 格式 必须 为 JPEG、GIF 或 
PNG。 在 Dreamweaver CC 中 跟踪 图 像 是 可 见 的 ,但 在 浏览 器 中 浏览 网 页 时 ,跟踪 图 像 不 
会 被 显示 。 


6. 保存 网 页 的 属性 设置 

单 击 【标准 】 工 具 栏 中 的 【保存 了 按钮 或 [全 部 保存 了 按钮 ,保存 网 页 的 属性 设置 。 
任务 2-1-5 在 网 页 中 输入 文字 

1. 确定 文字 输入 位 置 


用 鼠标 单 击 网 页 编辑 窗口 中 的 空白 区 域 ,窗口 中 随即 出 现 闪 动 的 光标 ,标识 输入 文字 
的 起 始 位 置 ,如 图 2-20 所 示 。 


2. 输入 页 面 文本 的 标题 


选择 适当 的 输入 法 ,并 在 适当 的 位 置 输入 一 行文 字 * 阿 坝 概况 ”作为 页 面 文本 的 标题 ， 
然后 按 Enter 键 换行 ,如 图 2-21 所 示 。 


光标 





图 2-20 文档 窗口 的 光标 2-21 输入 页 面 文本 的 标题 后 换行 


3. 输入 页 面 段落 文本 的 标题 


在 图 2-21 所 示 的 光标 位 置 输入 段落 文本 的 标题 “地 理 
位 置 ;”, 然 后 按 Enter 键 换行 。 


4. 输入 空格 和 文本 段落 


在 【插入 了 面板 中 切换 到 HTML 工具 栏 , 然 后 在 该 工具 栏 
中 选择 [不 换行 空格 命令 ,如 图 2-22 所 示 , 在 新 的 一 行 插入 一 
个 空格 ,然后 使 用 类 似 的 方法 插入 其 他 3 个 连续 的 空格 。 

提示 : 也 可 以 选择 Dreamweaver CC 主 界 面 的 菜单 命令 
【插入 >HTMIL>【 不 换行 空格] 来 插入 空格 。 

青 输入 一 行文 字 “ 阿 坝 藏 族 羌 族 自治 州 地 处 青藏 高 原 东 
南 缘 , 横 断 山脉 北端 与 川西 北 高 山峡 谷 的 结合 部 。”, 按 | 
Shift 十 Enter 组 合 键 实现 换行 。 2-22 ”插入 【不 换行 空格 】 

然后 插入 4 个 连续 空格 ,接着 输入 文字 “位 于 四 川 省 西 的 下 拉 菜 单 
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北部 ,紧邻 成 都 平原 ,北部 与 青海 .甘肃 省 相 邻 ,东南 西 三 面 分 别 与 成 都 .绵阳 、 德 阳 、 雅 安 、 
甘孜 等 市 州 接 壤 。”, 结 果 如 图 2-23 所 示 。 








阿 其 概况 


地 理 位 置 : 
。 网 可 大 族 羌 旋 自 治 州 邮 处 青藏 高 原 东南 缘 ， 横 断 山 肪 北端 与 镍 西北 高 山峡 谷 的 


,ps, 并 洛 、 匡 洒 各 相 引 ， 杰 南西 三 而 人 
别 5 成 都、 绵阳 、 入 阳 、 雅 安 、 半 孜 等 市 革 重 


图 2-23 输入 空格 和 多 行文 本 





提示 : 应 区 别 网 页 中 两 种 不 同 换行 方法 的 行距 。 按 Enter 键 ,换行 的 行距 较 大 ,换行 
会 形成 不 同 的 段落 ;而 按 Shift 十 Enter 组 合 键 ,换行 的 行距 较 小 , 仍 为 同一 个 段落 。 

5. 保存 所 输入 的 文本 

输入 的 文本 应 及 时 进行 保存 。 
任务 2-1-6 输入 与 编辑 网 页 中 的 文本 

在 网 页 中 输入 的 文本 与 Word 一 样 ,也 能 进行 编辑 修改 ,常见 的 文本 编辑 操作 如 下 : 

(1) 拖 动 鼠标 可 以 选中 一 个 或 多 个 文字 .一行 或 多 行文 本 ,也 可 以 选中 网 页 中 的 全 部 
文本 。 

(2) 按 Backspace 键 或 Delete 键 可 实现 删除 文本 的 操作 。 

(3) 将 光标 移动 到 需要 插入 文本 的 位 置 ,输入 新 的 文本 。 

(4) 实现 复制 . 剪 切 .粘贴 等 操作 。 

(5) 实现 查找 与 替换 操作 。 

(6) 实现 撤销 或 重 做 操作 。 

这 些 文本 的 编辑 操作 可 以 使 用 Dreamweaver CC 主 界面 中 的 [编辑 ] 菜 单 中 的 命令 完 
成 ,部 分 操作 也 可 以 先 选 中 文本 ,然后 右 击 并 打开 快捷 菜单 ,利用 快捷 菜单 中 的 命令 完 


1. 输入 “行政 区 划 : "及 相关 内 容 


输入 段落 标题 “行政 区 划 : ”后 按 Enter 键 换行 ,然后 插入 4 个 空格 和 输入 文本 “ 辖 马 
尔 康 .金川 小金. 阿坝. 若尔盖、 红 原 、 壤 塘 、 汶 川 、 理 县 茂县. 松潘、 九寨 沟 、. 黑 水 13 县 ， 
224 个 乡镇 。”"。 再 一 次 按 Enter 键 换行 。 


2. 输入 “气候 资源 : ”及 相关 内 容 


输入 段落 标题 “气候 资源 : “后 按 Enter 键 换行 ,然后 插入 4 个 空格 和 输入 如 图 2-24 
所 示 的 多 行文 本 。 再 一 次 按 Enter 键 换行 。 


3. 输入 “生态 资源 : ”及 相关 内 容 


输入 段落 标题 “生态 资源 : ”后 按 Enter 键 换行 ,然后 插入 4 个 空格 和 输入 如 图 2-25 
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Ps ee 要 
寒 间 长 ， 夏 季 凉 塞 痪 酒 , 年 予 均 气温 为 0. 8 一 山 原 地 带 夏 季 溪 凉 ， 冬 春 寒冷 ， 于 
人 6 一 8.9YC。 放生 ， 卫 着 海 技 高 度 变化 ， 雪 芝 性 





图 2-24 “气候 资源 : "及 相关 内 容 


万 是 入 世界 自然 得 产 、 人 生物 图 保 护 区 和 “绿色 环球 
三 项 顶级 桂冠 的 风景 区 。 狂 特 的 藏族 、 莞 族 民族 风情 ， 
未 越 多 的 中 外 游客 。 
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2-25 “生态 资源 : ”及 相关 内 容 


4. 保存 网 页 
保存 网 页 0201. html。 
任务 2-1-7 格式 化 网 页 文本 


Dreamweaver CC 中 专门 提供 了 对 文本 进行 格式 化 的 [格式 菜单 和 [属性 面板 , 文 
本 的 字体 ,大 小 和 颜色 等 属性 的 设置 可 以 通过 【属性 】 面 板 来 完成 。 


1. 显示 [属性 面板 


在 Dreamweaver CC 窗口 中 ,选择 [窗口 >【 属 性 命令 ,打开 [属性 ] 面 板 ,HTML 的 
【属性 面板 如 图 2-26 所 示 。 在 【属性 面板 中 单 击 左下 角 的 CSS 按钮 庆 到 , 即 可 切换 
到 CSS 的 [属性 了 面板 ,如 图 2-27 所 示 。 同 样 在 [属性 ] 面 板 中 单 击 HTML 按钮 攻 En 
即 可 切换 到 HTML 的 【属性 了 面板 。 


图 2-26 HTML 的 [属性 ] 面 板 


2-27 ”CSS 的 【属性 了 面板 
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2. 设置 标题 “阿坝 概况 ”的 格式 属性 


选中 网 页 的 文本 标题 “阿坝 概况 ”, 在 HTML 的 【属性 了 面板 的 【格式 】 下 拉 列 表 框 中 
选择 “标题 1”; 切 换 到 CSS 的 【属性 了 面板 单 击 【属性 了 面板 上 [居中 对 齐 了 按钮 国 ], 使 页 面 
文本 标题 居中 对 齐 。 


3. 设置 各 个 段落 标题 的 格式 属性 


选中 第 一 个 段落 标题 “地 理 位 置 : " ,在 HTML 的 【属性 了 面板 的 【格式 】 下 拉 列 表 框 中 
选择 “标题 2”。 使 用 类 似 的 方法 对 其 他 3 个 标题 “行政 区 划 : “气候 资源 : ”和 “生态 资 
源 : ”进行 格式 设置 。 


4. 保存 对 网 页 文本 的 格式 设置 

使 用 “保存 ”相关 命令 保存 对 网 页 文本 的 格式 设置 。 
任务 2-1-8 设置 超 链 接 与 浏览 网 页 效果 

1. 设置 超 链接 


在 网 页 文档 中 选中 文字 “阿坝 藏族 羌族 自治 州 ", 然 后 在 [属性 3 面板 的 [链接] 文本 框 
中 输入 "#”, 即 链接 到 当前 页 面 , 此 时 页 面 文字 “阿坝 藏族 羌族 自治 州 ?的 颜色 自动 变 为 
blue, 即 在 【页面 属 性 ] 对 话 框 中 所 设置 的 “链接 颜色 ”。【 属 性 3 面板 如 图 2-28 所 示 。 





2-28 ”在 [属性] 面板 的 [链接 ] 文 本 框 中 输入 “#” 


2. 浏览 网 页 效果 


按 F12 快捷 键 ,可 显示 网 页 的 浏览 效果 。 

观察 页 面 中 标题 .段落 文字 和 项 目 列表 的 字体 、 大 小 、 颜 色 和 对 齐 方式 。 重 点 观察 所 
设置 超 链接 的 文字 颜色 ,将 鼠标 指针 指向 超 链接 文字 "阿坝 藏族 羌族 自治 州 ”观察 颜色 的 
变化 , 单 击 超 链接 文字 “阿坝 藏族 羌族 自治 州 ”观察 颜色 的 变化 。 


任务 2-1-9 在 [代码 了 视图 中 查看 CSS 代码 和 HTML 代码 
1. 切换 到 [代码] 视图 


在 Dreamweaver CC 主 窗口 【文档 工具 栏 中 单 击 【代码 按钮 , 即 可 切换 到 [代码 】 
视图 。 
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2. 网 页 [外观] 属性 设置 的 样式 代码 


在 Dreamweaver CC 的 【页 面 属性 对话 框 中 对 页 面 的 【外 观 ] 属 性 进行 设置 ,自动 生 
成 的 样式 代码 如 表 2-4 所 示 。 
这 些 样式 代码 分 别 定 义 了 页 面 文字 的 字体 和 大 小 ,页 面 的 背景 颜色 、 左 边 距 、 上 边 距 、 








右边 距 和 下 边 距 。 
表 2-4 网 页 [外 观 ] 属 性 设置 的 样式 代码 
行 号 CSS 代码 
01 body, td, th { 
02 font- family:" 仿 宋 "7 
03 font- size: 14px; 
04 } 
05 | bodyf 
06 background- color: #DDF4FC; 
07 margin- left:30px; 
08 margin- top: 10px; 
09 margin- right:30px; 
10 margin- bottom: 10px; 
姓 } 





3. 网 页 【链接 ] 属 性 设置 的 样式 代码 


在 Dreamweaver CC 的 【页面 属性 ] 对 话 框 中 对 页 面 的 【链接 属性 进行 设置 ,自动 生 
成 的 样式 代码 如 表 2-5 所 示 。 

这 些 样式 代码 分 别 定义 了 页 面 链接 文字 的 字体 和 大 小 ,网 页 链接 初始 状态 的 颜色 ,已 
访问 链接 的 颜色 ,变换 图 像 链 接 的 颜色 ,活动 链接 的 颜色 以 及 下 画 线 的 样式 。 


表 2-5 网 页 [链接 ] 属 性 设置 的 样式 代码 





行 号 CSS 代码 
01 ai 
02 font- family:" 宋 体 " 
03 font- size: 14px; 
04 color: blue; 
05 } 
06 a:link { 
07 text- decoration: none; 
08 } 
09 a:visited { 
10 text— decoration: none; 
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续 表 
行 号 CSS 代码 
b color: olive; 
12 } 
13 a:hover { 
14 text— decoration: underline; 
15 color: aqua; 
16 } 
17 a:active { 
18 text- decoration: none; 
19 Color: red; 
20 } 
4. 网 页 【标题 属性 设置 的 样式 代码 


在 Dreamweaver CC 的 【页 面 属性 对 话 框 中 对 页 面 的 【标题 属性 进行 设置 ,自动 生 
成 的 样式 代码 如 表 2-6 所 示 。 
这 些 样式 代码 分 别 定义 了 标题 hl 至 标题 h6 的 字体 ,以 及 标题 hl1、h2、h3 的 大 小 和 





颜色 。 
表 2-6 网 页 [标题 属性 设置 的 样式 代码 
行 号 CSS 代码 
01 hl, h2, h3, h4, h5, hé { 
02 font- family:" 黑 体 "; 
03 } 
04 hl { 
05 font- size: 24px; 
06 Color: #0000FF; 
07 text- align: center; 
08 } 
09 h2 { 
10 font- size: 18px; 
11 Color: #FFOOFF; 
12 ’ 
RR h3{ 
14 font- size: 14px; 
15 color: Black; 
16 } 
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5. HTML 代码 的 标题 标签 与 段落 标签 的 应 用 


网 页 0201. html 的 部 分 HTML 代码 如 表 2-7 所 示 ,这 些 代码 主要 为 标题 标签 和 段落 
标签 的 应 用 。 


表 2-7 HTML 代码 的 标题 标签 与 段落 标签 的 应 用 
行 号 HTML 代码 





01 <hl> 阿 坝 概 况 < /hl> 

02 “| <h2> 地 理 位 置 :< /h2> 

03 <p> gnbsp; snbsp; gnbsp; gnbsp;<a hre 人 =- "#"> 阿 坝 藏族 羌族 自治 州 < /a> 地 处 青藏 高 
04 “| 原 东南 缘 , 横 断 山 脉 北端 与 川西 北 高 山峡 谷 的 接合 部 。<br > 

05 “| gnbsp;&nbsp;&nbsp;&nbsp; 位 于 四 川 省 西北 部 ,紧邻 成 都 平原 ,北部 与 青海 甘肃 省 相 
06 “| 邻 ,东南 西 三 面 分 别 与 成 都 绵阳、 德阳 、 雅 安 ,甘孜 等 市 州 接壤 。< /p> 

07 “| <h2> 行 政 区 划 :< /h2> 

08 <p> gnbsp; gnbsp; gnbsp; gnbsp; 辖 马尔 康 、 金 川 小金 .阿坝 .若尔盖 …… </p> 

09 “| <h2> 气 候 资源 :< /h2> 

10 “| <p> &nbsp;&nbspy&nbsp;&nbsp; 气 温 自 东 南 向 西北 并 随 海 拔 由 低 到 高 而 相应 降低 ……< /p> 
11 | <h2> 生 态 资源 :< /h2> 

12 | <p>&nbsp;snbsp;&nbsp;&nbsp 阿坝 州 的 九寨 沟 .黄龙 ……</p> 





1) 标题 标签 

HTML 中 ,定义 了 6 级 标题 ,分 别 为 hl、h2、h3、h4、h5、h6, 每 级 标题 的 字体 大 小 依次 
递减 ,1 级 标题 字号 最 大 ,6 级 标题 字号 最 小 。 标 题字 可 以 在 页 面 中 实现 水 平方 向 左 、 居 
中 \ 右 对 齐 ,以 便 文字 在 页 面 中 的 排版 。 对 齐 方式 可 以 为 left( 左 对 齐 ) right( 右 对 齐 )、 
center( 居 中 对 齐 ) 。 

表 2-7 中 的 01 行 应 用 了 标题 1,02、07、09 和 11 行 应 用 了 标题 2。 

2) 段落 标签 

当 需 要 在 网 页 中 插入 新 的 段落 时 ,可 以 使 用 段落 标签 二 p 二 二 /p 二 , 它 可 以 将 标签 后 
面 的 内 容 另 起 一 段 ,在 Dreamweaver CC 的 设计 视图 中 , 按 Enter 键 后 ,就 会 自动 形成 一 
个 段落 ,相当 于 添加 了 二 p 二 标签 。 段 落 文字 的 水 平 对 齐 方式 有 三 种 : left( 左 对 齐 ) \right 
( 右 对 齐 ) .center( 居 中 对 齐 ) 。 

表 2-7 中 的 03 行 至 06 行为 一 个 段落 ,08、10 和 12 行 各 为 一 个 段落 ,各 包含 了 一 对 段 
落 标签 <p> 雪 /p>。 

3) 强制 换行 标签 

强制 换行 标签 二 br 二 是 一 个 单 标签 ,与 段落 标签 在 显示 效果 上 都 是 男 起 一 行书 写 ,但 
是 段落 标签 的 行距 要 宽 , 制 作 网 页 时 ,换行 可 以 通过 按 Shift 十 Enter 组 合 键 实现 。 

表 2-7 中 的 04 行 有 一 个 强制 换行 标签 。 

4) 转 义 符号 

表 2-7 中 的 03、05、08、10 和 12 行 插入 了 多 个 转 义 符号 “&nbsp;”, 表 示 空 格 。 
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任务 2-2 使 用 CSS 美化 文本 
标题 和 文本 段落 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0202. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0202. html 中 添加 必要 的 HTML 标签 和 输入 文字 。 

(4) 浏览 网 页 0202. html 的 效果 ,如 图 2-29 所 示 ,该 网 页 包含 文本 标题 和 多 个 正文 
段落 。 


阿坝 概况 


地 理 位 置 : 阿坝 称 族 持 族 自治 州 地 处 青 蔓 高 原 东南 乡 ， 横 汤山 脉 北 庙 与 川西 北 高 山峡 谷 的 抽 合 部 ， 位 于 四 川 省 西北 部 ， 紧 邻 成 都 
平原 ， 北 缉 与 青海 甘肃 省 相 邻 ， 东 南西 三 面 分 别 与 成 都 、 绵 阳 、 和 项 阳 ， 蓝 安 、 甘 孜 等 市 州 接壤 . 


行政 区 划 ; 辖 马 尔 庚 、 爹 川 、 小 爹 、 阿 坝 、 若 尔 蔷 、 红 原 、 雯 塘 、 汶 川 、 理 县 、 芒 县 、 松 潘 、 九 毫 沟 、 震 水 13 县 ，224 个 乡镇 . 


气候 资源 : 气温 自 东 南 向 西北 并 随 海拔 由 低 到 高 而 相应 降低 。 西 北部 的 乒 状 高 原 冬 手 严守 漫长 ， 夏 竹 凉 寒 温润 ， 年 平均 气温 为 
0.8~ 4.3 并 . 山 原 地 芝 夏 季 温 凉 , 冬 春 寒冷 , 干 温 竹 明显 ,年 平均 气温 为 5.6 ~ 8.9'C. 高 山峡 谷地 带 , 随 着 海拔 高度 变 化 ,气候 从 亚热带 到 
温带 、 塞 温带 、 塞 带 ， 呈 明暗 的 委 站 性 差异 . 

生态 资源 ; 阿坝 州 的 九宫 沟 、 黄 龙 是 焦 世 界 自然 遗产 、 人 与 生物 轿 保 护 区 和 “绿色 环球 21” 可 持续 发 展 旅游 的 保护 区 三 项 顶级 桂 
冠 的 风景 区 。 独 符 的 藏族 、 半 族 民族 风情 ， 神 秘 的 茂 传 佛教 文化 吸引 了 越 来 越 多 的 中 外 游客 . 





2-29 网 页 0202. html 的 浏览 效果 


【任务 袜 施 】 


1. 创建 样式 文件 base. css 


在 Dreamweaver CC 主 窗口 的 [文件 菜单 中 选择 【新建 ] 命 令 , 打 开 【 新 建文 档 】 对 话 
框 ,在 该 对 话 框 左 侧 选 择 “ 空 白 页 ”",【 页 面 类 型 选择 CSS。 

在 【新 建文 档 ] 对 话 框 中 单 击 【创建 ] 按 钮 创建 一 个 
CSS 样式 文件 。 将 新 建 的 CSS 样式 文件 保存 在 CSS 文 
件 夹 ,名 称 为 “base. css”。 

1) 定义 标签 body 的 属性 

打开 【CSS 设计 器 3 面板 ,其 初始 状态 如 图 2-30 所 
示 , 在 【选择 器 ] 区 域 单 击 【添加 选择 器 按钮 素 . 然 后 输 
入 选择 器 名 称 body, 按 Enter 键 。 再 单 击 选择 选择 器 
body, 并 且 取 消 【 显 示 集 了 复 选 框 的 选中 状态 ,如 图 2-31 
所 示 。 

在 [布局 区域 width 属性 行 中 输入 1200px, 如 图 2-32 图 2-30 【CSS 设 计 器 ] 的 初始 状态 
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所 示 。 
在 [属性] 面板 中 单 击 [ 文 本 ] 按 钮 国 . 切 换 到 [文本 ] 属 性 设置 区 域 .设置 color 属性 为 
“并 666”, 如 图 2-33 所 示 。 





图 2-31 选择 新 添加 的 选择 器 body 图 2-32 设置 width 的 属性 值 


然后 依次 设置 font-family 属性 为 “微软 雅 黑 ”,font-size 属性 为 12px, line-height 属 
性 为 2emo,text-indent 属性 为 32px, 设 置 结 果 如 图 2-34 所 示 。 





图 2-33 设置 color 的 属性 值 2-34 设置 body 的 多 项 属性 


在 图 2-34 所 示 的 [CSS 设计 器 属性 列表 中 指向 某 一 个 属性 行 ,会 出 现 [删除 CSS 属 
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性 了 按钮 获 , 单 击 [删除 CSS 属性 3 按钮 , 则 可 以 删除 对 应 的 属性 设置 。 
标签 body 的 属性 设置 完成 后 ,会 自动 添加 如 下 所 示 的 CSS 代码 。 


body { 
width: 1200px; 
Color: #666; 
font- family: "微软 雅 黑 "; 
font- size: 12px; 
line- height: 2em; 
text— indent :32px; 
} 
2) 添加 选择 器 hl、h2、p 并 定义 其 属性 
在 【CSS 设计 器 了 面板 的 选择 器 列表 中 选择 选择 器 body, 再 单 击 【添加 选择 器 ] 按 钮 
绰 , 然 后 输入 新 的 选择 器 “hl,h2,p”, 如 图 2-35 所 示 。 
在 选择 器 列表 中 选择 刚才 添加 的 选择 器 “hl,h2,p”, 然 后 在 【属性 面板 margin 区 域 
依次 单 击 将 上 、 下 、 左 、 右 的 margin 属性 值 设 置 为 0px, 接 着 在 padding 区 域 依次 单 击 设置 
上 \、 下 \ 左 人 右 的 padding 属性 值 为 0px, 如 图 2-36 所 示 。 





2-35 添加 新 的 选择 器 hl ,h2,p 2-36 设置 margin 和 padding 属性 


选择 器 hl ,h2,p 的 属性 设置 完成 后 ,会 自动 添加 如 下 所 示 的 CSS 代码 。 


hl, h2, PT 
margin- top: 0px7 
margin- left: Opx; 
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margin- right: Opx; 
margin- bottom: Opx; 
padding- top: Opx; 
padding- left: Opx; 
padding- right: Opx; 
padding- bottom: Opx; 
} 
由 于 margin 和 padding 四 个 方向 的 属性 都 设置 为 0px, 可 以 将 代码 予以 简化 ,结果 如 
下 所 示 。 


hl, h2,p{ 
margin: Opx; 
padding: Opx; 
} 


2. 创建 样式 文件 main. css 


创建 样式 文件 main. css, 将 其 保存 到 文件 夹 css 中 。 

1) 定义 标签 section 的 属性 

打开 [CSS 设计 器 了 面板 ,在 【选择 器 区域 单 击 【 添 加 选择 器 按钮 吕 , 然 后 输入 选择 
器 名 称 section, 按 Enter 键 。 再 单 击 选 择 选择 器 section ,在 【布局 区域 width 属性 行 中 
输入 1200px。 在 margin 区 域 上 方 输入 10, 即 设置 margin-top 的 属性 值 为 10px。 

标签 section 的 属性 设置 完成 后 ,会 自动 添加 如 下 的 CSS 代码 。 


Section { 
width: 1200px; 
margin- top: 10px; 
2) 添加 选择 器 ec-g 并 定义 其 属性 
在 【CSS 设计 器 了 面板 的 选择 器 列表 中 选择 选择 器 section ,然后 单 击 【 添 加 选择 器 ] 按 
钮 碍 ,接着 添加 新 的 选择 器 “. ec-g”。 
在 选择 器 列表 中 选择 刚才 添加 的 选择 器 “. ec-g”, 在 【属性 面板 中 设置 布局 属性 ， 
width 属性 设置 为 86px,padding 属性 上 、 下 、 左 、 右 设置 为 10px。 
选择 器 “. ec-g” 的 属性 设置 完成 后 ,会 自动 添加 如 下 的 CSS 代码 。 
“EC 可 至 
width: 860px; 
padding: 10px; 
} 
3) 添加 其 他 选择 器 并 定义 其 属性 
在 [CSS 设计 器 了 面板 中 分 别 添加 选择 器 “. w-box”. w-box h2”. w-box p”, 并 设置 
各 个 选择 器 的 属性 。 
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样式 文件 main. css 中 各 个 选择 器 及 其 属性 设置 的 CSS 代码 如 表 2-8 所 示 。 
表 2-8 样式 文件 main. css 中 各 个 选择 器 及 其 属性 设置 的 CSS 代码 




















序号 CSS 代码 序号 CSS 代码 
01 | section { 14 -W-box h2 { 
02 width: 1200px7 15 text- align: center; 
03 margin- top: 10px; 16 font-— size: 24px; 
04 |} by 
05 -ec-gf{ 18 
06 width: 860px; 19 | .w-boxpt{ 
07 padding: 10px; 20 margin: .75em 07 
08 |} 2 line- height: 162%; 
09 .Ww-box { 22 color: #666; 
10 padding: 10px 20px 10px Spx; 23 font- size: 14px; 
11 background- color: transparent; 24 pagdding- left: 15px; 
| 5 text- indent :32px; 
13 26 |} 


3. 创建 网 页 文档 0202. html 


1) 创建 网 页 文档 0202. html 

在 文件 夹 “0202? 中 创建 网 页 文档 0202. html。 

2) 链接 外 部 样式 表 

切换 到 网 页 文档 0202. html 的 【代码 视图 】 ,在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 
样式 表 的 代码 如 下 : 


<link rel="stylesheet" type= "text/css" href= "css/base.css" /> 

<link rel="stylesheet" type= "text/css" href= "css/main.css" /> 

3) 编写 网 页 主体 布局 结构 的 HTML 代码 

切换 到 【代码 1 编辑 窗口 ,在 网 页 标签 二 body 过 和 二 /body> 之 间 输 入 HTML 代码 ， 
在 输入 标签 过 程 中 会 自动 显示 相关 的 标签 列表 ,例如 输入 标签 “一 section 二 "时 , 当 输 入 
“过 se” 时 会 出 现 如 图 2-37 所 示 的 标签 列表 。 


El 





图 2-37 输入 标签 “过 section>” 时 出 现 的 标签 列表 


网 页 0202. html 主体 布局 结构 的 HTML 代码 如 表 2-9 所 示 。 
表 2-9 网 页 0202. html 主体 布局 结构 的 HTML 代码 
序号 HTML 代码 序号 HTML 代码 


01 | < section> 02 <div class= "ec- g"> 
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续 表 
序号 HTML 代码 序号 HTML 代码 
03 <div class= rw-box"> 07 < -文章 内 容 --> 
04 < !-- 文 章 标题 --> 08 </div> 
05 </div> 09 </div> 
06 <div class= "Ww- box"> 10 |</section> 














说 明 : 插入 div 标签 也 可 以 使 用 插入 了 菜单 中 的 Div 命令 实现 ,方法 如 下 : 将 光标 置 
于 网 页 中 需要 插入 div 标签 的 位 置 , 然 后 选择 [插入 】>~Div 命令 ,打开 【插入 Div] 对 话 框 ， 
在 该 对 话 框 中 “插入 ”位 置 列表 中 选择 “在 插入 点 ”, 在 Class 列表 中 选择 合适 的 类 ,例如 选 
择 “ec-g”, 如 图 2-38 所 示 , 再 单 击 [确定 3 按钮 , 即 可 插入 div 标签 ,然后 输入 文本 内 容 或 插 
入 图 片 即 可 。 





图 2-38 【插入 Div] 对 话 框 


4) 输入 HTML 标签 与 文字 
在 网 页 文档 0202. html 中 输入 所 需 的 标签 与 文字 ,HTML 代码 如 表 2-10 所 示 。 


表 2-10 网 页 0202. html 的 HTML 代码 








序号 HTML 代码 
01 <section> 
02 <div class="ec-g"> 
03 <div class="w- box"> 
04 <h2> 阿 坝 概况 < /h2> 
05 </div> 
06 <div class="Ww-box"> 
07 <E><strong> 地 理 位 置 </strong> :阿坝 藏族 羌族 自治 州 地 处 青藏 高 原 东南 缘 ,横断 山脉 
08 北端 与 川西 北 高 山峡 谷 的 接合 部 ,位 于 四 川 省 西北 部 ,紧邻 成 都 平原 ,北部 与 青海 、 甘 
09 肃 省 相 邻 ,东南 西 三 面 分 别 与 成 都 ,绵阳 ,德阳 雅安 ,甘孜 等 市 州 接壤 。< /p> 
10 <p><strong> 行 政 区 划 < /strong> : 辖 马 尔 康 、 金 川 . 小 金 .阿坝 、 若 尔 盖 \ 红 原 、 壤 塘 、 汶 
11 川 理 县 \ 茂 县、 松潘、 九寨沟 、 黑 水 13 县 ,224 个 乡镇 。< /p> 
12 <E><strong> 气 候 资 源 < /strong> :气温 自 东南 向 西北 并 随 海拔 由 低 到 高 而 相应 降低 。 
13 西北 部 的 丘 状 高 原 冬 季 严 寒 漫 长 ,夏季 凉 寒 湿 润 ,年 平均 气温 为 0.8~ 4.3C 。 山 原 地 带 
14 夏季 温 凉 , 冬 春 寒冷 , 干 湿 季 明 显 , 年 平均 气温 为 5.6~ 8.9C 。 高 山峡 谷地 带 , 随 着 海拔 
15 高 度 变化 ,气候 从 亚热带 到 温带 、 寒 温带 、 寒 带 , 呈 明 显 的 垂直 性 差异 。< /p> 
16 <p>< strong> 生 态 资源 < /strong> :阿坝 州 的 九寨 沟 、 黄 龙 是 集 世 界 自然 遗产 .人 与 生 
谅 物 圈 保 护 区 和 “绿色 环球 21” 可 持续 发 展 旅游 的 保护 区 三 项 顶级 桂冠 的 风景 区 。 





60 


单元 2 网 页 中 文本 与 段落 的 应 用 设计 








续 表 
序号 HTML 代码 
18 独特 的 藏族 ,羌族 民族 风情 ,神秘 的 藏 传 佛教 文化 吸引 了 越 来 越 多 的 中 外 游客 。 
19 </p> 
20 </div> 
2 </div> 
22 </section> 





4. 保存 与 浏览 网 页 
保存 网 页 文档 0202. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 2-29 
所 示 。 


【同步 训练 】 
任务 2-3 制作 介绍 九寨 沟 概 况 的 文本 网 页 


在 网 页 中 输入 以 下 HTML 标签 及 文字 。 


<h2> 九 寨 沟 概况 </h2> 
<p> 九 寨 沟 位 于 四 川 省 西北 部 岷 山 山脉 南 段 的 阿坝 藏族 羌族 自治 州 九寨 沟 县 漳 扎 镇 境内 , 因 沟 内 
有 树 正 、 荷 叶 、 则 查 洼 等 九 个 藏族 村 寨 而 得 名 。 九 寨 沟 年 均 气温 为 6- 14YC , 冬 无 严寒 ,夏季 凉爽， 
四 季 景 色 各 异 :仲春 树 绿 花 艳 ,盛夏 幽 湖 浴 山 ,金秋 尽 染 山林 ,隆冬 冰 塑 自然 。 以 染 湖 、 释 瀑 、 彩 
林 、 雪 峰 、 藏 情 、 蓝 冰 这 “六 绝 " 著 称 于 世 。< /p> 
针对 上 述 标 题 文字 “九寨 沟 概 况 ” 和 正文 文字 进行 各 种 类 型 的 文本 属性 设置 。 
(1) 设置 字体 分 别 为 sans-serif、Georgia、Times New Roman、Times,、serif。 
(2) 设置 字体 风格 属性 分 别 为 italic 或 者 oblique。 
(3) 设置 标题 文字 的 大 小 分 别 为 35px、2. 5em、400% 或 者 x-large, 设 置 正文 文字 的 大 
小 分 别 为 16px、9pt、0. 875em、200% 或 者 small ,medium \large。 
(4) 设置 字体 加 粗 属性 分 别 为 bold、bolder、lighter 或 者 700。 
(5) 设置 颜色 属性 分 别 为 # 3a3a3a、#c63、RGB(0,0,255)、RGB(0,0,100%)、gray 
或 者 orange 等 。 
(6) 设置 水 平 对 齐 属性 分 别 为 居中 对 齐 或 者 右 对 齐 。 
(7) 设置 文字 装饰 属性 分 别 为 underline、overline、line-through 或 者 blink。 
(8) 设置 行 高 属性 分 别 为 30px、40px 或 者 150% 等 。 
(9) 设置 内 边 距 padding 为 3px、0、3px、0。 
(10) 设置 下 外 边 距 margin-bottom 为 10px。 
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提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 】 


1. 利用 CSS 样式 实现 文字 排版 


利用 CSS 样式 除了 可 以 设置 网 页 文本 的 字体 属性 ,还 可 以 对 字 距 空白, 修饰 ,转换 
等 进行 设置 。 

(1) 字 距 。 

(2) 空白 。 

(3) 文本 修饰 。 

(4) 文本 转换 。 

提示 : 请 扫描 二 维 码 浏览 详细 内 容 。 以 下 同类 情况 类 似 处 理 。 


2. 利用 CSS 样式 实现 段落 排版 

利用 CSS 样式 除了 可 以 实现 文字 排版 之 外 ,还 可 以 实现 段落 排版 ,对 缩 进 、 对 齐 , 行 
距 , 文 本 行 等 方面 进行 控制 。 

(1) 缩 进 。 

(2) 对 齐 。 

(3) 行距 。 

(4) 文本 行 。 

3. 利用 CSS 样式 实现 段落 首 字 下 沉 效果 

利用 CSS 的 伪 元 素 first-letter 可 以 设置 段落 的 首 字 下 沉 的 特效 ,HTML 代码 
如 下 : 

<p> 很 难 找到 一 个 像 阿坝 这 样 汇聚 万 千 风情 的 地 方 了 ,神秘 奇特 的 自然 风光 和 多 元 民族 的 古老 文 

化 在 此 浪漫 相遇 。< /p> 
对 应 的 CSS 代码 如 下 : 








回 





p:first-letter { 
font- size:36px; 
font— weight :bold; 
float:left; 
} 
在 Google Chrome 浏览 器 中 的 浏览 效果 如 图 2-39 所 示 。 
伪 元 素 first-letter 表示 段落 的 第 一 个 字符 ,可 以 针对 段落 的 第 一 个 字符 设置 样式 , 设 
置 首 字 符 左 浮动 ,可 以 使 其 右 侧 的 文本 显示 在 第 一 个 字符 的 右 侧 ,而 不 是 换行 。 
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| 很 汪 千 风 情 的 地 方 了 ， 神 秘 奇 特 的 自然 风光 和 多 元 民族 的 古老 文化 在 此 浪漫 相遇 。 








图 2-39 段落 首 字 下 沉 效 果 的 浏览 效果 


4. 利用 CSS 样式 实现 网 页 元 素 的 水 平 对 齐 


在 CSS 中 ,可 以 使 用 多 种 属性 来 水 平 对 齐 元 素 。 

1) 使 用 text-align 属性 水 平 对 齐 元 素 

块 元 素 指 的 是 占据 全 部 可 用 宽度 的 元 素 ,并 且 在 其 前 后 都 会 换行 。 网 页 中 常见 的 块 
元 素 有 <hl>> .二 p 二 .二 div 之 。textalign 是 一 个 基本 的 属性 , 它 会 影响 一 个 元 素 中 的 文 
本 行 互相 之 间 的 对 齐 方 式 。 

2) 使 用 margin 属性 水 平 对 齐 块 元 素 

将 块 级 元 素 或 表 元 素 居 中 ,要 通过 在 这 些 元 素 上 适当 地 设置 左右 外 边 距 来 实现 。 可 
通过 将 左 和 右 外 边 距 设置 为 auto 来 对 齐 块 元 素 。 把 左 和 右 外 边 距 设 置 为 auto, 规 定 的 是 
均等 地 分 配 可 用 的 外 边 距 ,结果 就 是 居中 的 元 素 , 示 例 代 码 如 下 : 


“CenteT 
{ 
margin- left:auto; 
margin- right:auto; 
width:70%; 
background- color:#b0e0e6; 
} 


如 果 宽 度 是 100%, 则 对 齐 没有 效果 。 

3) 使 用 position 属性 进行 左 和 右 对 齐 

使 用 绝对 定位 也 可 以 对 齐 元 素 , 绝 对 定位 元 素 会 从 正常 流 中 删除 ,并 且 能 够 交 秋 元 
素 。 示 例 代码 如 下 : 


.right 
{ 

position:absolute; 

right :Opx; 

width:300px; 

background- color:#b0e0e6; 
} 


4) 使 用 float 属性 来 进行 左 和 右 对 齐 
使 用 float 属性 也 可 以 对 齐 元 素 ,示例 代码 如 下 : 


.right 

{ 
float:right; 
width:300px; 
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background- color:#b0e0e6; 
} 


5. CSS 属性 值 缩写 的 书写 方法 


对 于 CSS 样式 定义 比较 熟练 的 设计 者 ,可 以 对 CSS 样式 定义 进行 整理 和 缩写 ,使 
CSS 代码 简洁 、 可 读 性 强 。CSS 属性 值 的 缩写 是 指 将 多 个 CSS 属性 定义 合并 到 一 行 中 的 
编写 方式 ,这 种 编写 方式 能 够 精简 CSS 代码 ,更 加 便于 阅读 。 

(1) font 字体 样式 的 缩写 。 

(2) color 颜色 样式 的 缩写 。 

(3) background 背景 样式 的 缩写 。 

(4) padding 内 边 距 样式 的 缩写 。 

(5) margin 外 边 距 样式 的 缩写 。 

(6) border 边框 样式 的 缩写 。 

(7) 列表 样式 缩写 。 


6. CSS 样式 的 继承 性 、 层 到 性 、 特 殊 性 和 优先 性 


(1) 继承 性 。 
(2) 层 释 性 。 
(3) 特殊 性 。 
(4) 优先 性 。 


7. 利用 关键 字 “!important” 实 现 不 同 浏览 器 显示 不 同 的 宽度 


由 于 关键 字 “ limportant” 表 示 所 附加 的 声明 拥有 最 高 优先 级 ,但 是 由 于 IE6 及 更 低 
版 本 浏览 器 不 能 识别 它 , 可 以 利用 IE 的 这 个 Bug 作为 过 滤器 ,实现 同一 个 规则 对 于 IE6 
及 更 低 版 本 应 用 一 个 属性 定义 ,而 对 于 IE7 和 其 他 浏览 器 却 应 用 另 一 个 属性 定义 。 

例如 ,有 如 下 所 示 的 CSS 定义 。 





#content { 
width:414px !important; 
width:400px; 
} 
由 于 IE7 和 Firefox、Opera 等 非 下 浏览 器 能 够 识别 “1important”, 但 是 IE6 及 更 低 
版 本 浏览 器 不 能 识别 它 ,根据 CSS 规则 ,附加 关键 字 “!limportant” 的 width 属性 定义 优先 
级 最 高 ,因此 对 于 IE7 和 Firefox、Opera 等 非 IE 浏览 器 对 于 上 面 的 样式 会 解析 为 414px。 
根据 CSS 层 秋 规则 ,IE6 及 更 低 版 本 浏览 器 会 忽略 “1important” 关 键 字 ,而 解析 为 400px， 
从 而 实现 不 同 浏览 器 显示 宽度 不 同 的 效果 。 
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8. CSS 代码 的 精简 与 优化 


编写 CSS 代码 时 ,不 仅 要 保证 代码 的 功能 满足 设计 要 求 , 而 且 要 考虑 代码 的 简洁 易 
读 、 宛 余 代码 少 , 有 必要 对 CSS 样式 代码 进行 精简 和 优化 。 

(1) 利用 CSS 代码 缩写 规则 精简 样式 代码 。 

(2) 利用 继承 性 优化 CSS 样式 代码 。 

(3) 利用 层 琶 覆盖 优化 CSS 样式 代码 。 

(4) 利用 样式 的 默认 值 优 化 CSS 样式 代码 。 

(5) 利用 选择 符 分 组 优化 CSS 样式 代码 。 

(6) 利用 公共 类 优化 CSS 样式 代码 。 


【问题 探究 】 


【问题 1】 什么 CSS? CSS 样式 与 HTML 有 何 区 别 ? CSS 样式 有 何 优 点 ? 

CSS 是 Cascading Style Sheet 的 缩写 , 称 为 “ 层 和 样式 表 ” ,一般 简称 为 样式 表 ”,“ 层 
释 " 是 指 多 个 样式 可 以 同时 应 用 于 同一 个 页 面 或 网 页 中 的 同一 个 元 素 。 

样式 表 是 万 维 网 协会 (W3C) 定 义 的 一 系列 格式 设置 规则 。 使 用 样式 表 可 以 非常 灵 
活 地 控制 网 页 的 外 观 , 从 精确 的 布局 定位 到 特定 的 字体 和 样式 ,都 可 以 使 用 CSS 样式 来 

CSS 样式 与 HTML 的 主要 区 别 有 : 网 页 是 用 HTML 语言 书写 的 ,一 个 HTML 网 
页 包含 了 许多 HTML 标签 。HTML 是 一 种 纯 文本 的 、 解 决 执 行 的 标记 语言 ,HTML 语 
言 定 义 了 网 页 的 结构 和 网 页 元 素 , 能 够 实现 网 页 普通 格式 要 求 , 但 是 网 页 制作 技术 在 不 断 
发 展 , 同 时 也 发 现 了 HTML 格式 化 功能 的 不 足 , 于 是 CSS 便 应 运 而 生 。CSS 样式 表 可 以 
控制 许多 仅 使 用 HTML 无 法 控制 的 属性 ,例如 CSS 可 以 指定 自 定义 列表 项 目 符号 并 指 
定 不 同 的 字体 大 小 和 单位 ,CSS 除了 设置 文本 格式 外 ,还 可 以 控制 网 页 中 * 块 ?级 别 元 素 
的 格式 和 定位 。 同 时 ,CSS 弥补 了 HTML 对 网 页 格式 化 功能 的 不 足 , 例 如 CSS 可 以 控制 
段落 间距 、 行 距 等 。CSS 的 代码 是 嵌入 在 HTML 文档 中 ,编写 CSS 的 方法 和 编写 
HTML 文档 的 方法 是 一 样 的 。 

CSS 样式 的 主要 优点 是 提供 便利 的 更 新 功能 ,更 新 CSS 样式 时 ,使 用 该 样式 的 所 有 
网 页 文档 的 格式 都 自动 更 新 为 新 样式 。 

CSS 样式 具有 更 好 的 易 用 性 与 扩展 性 ,CSS 样式 表 可 以 应 用 到 很 多 页 面 中 ,从 而 使 
不 同 的 页 面 获 得 一 致 的 布局 和 外 观 ; 使 用 外 部 样式 表 可 以 一 次 作用 于 若干 个 文档 ,甚至 整 
个 站 点 。 

【问题 2】 定义 CSS 样式 的 位 置 有 了 哪 几 种 ?CSS 的 三 种 用 法 在 同一 个 网 页 文档 中 可 
以 混用 吗 ? 





化 HTML 文档 。 插 入 样式 表 的 方法 有 以 下 三 种 。 
(1) 外 部 样式 表 。 
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(2) 内 部 样式 表 。 

(3) 内 联 样式 。 

【问题 3】 CSS 样式 的 应 用 主要 有 哪 几 种 形式 ? 各 有 了 哪些 特点 和 规则 ? 

HTML 文档 中 包含 多 种 网 页 元 素 , 例 如 文本 、 列 表 、 图 人像、 表格、 表 品类 让 
单 等 ,而 每 一 种 网 页 元 素 又 有 多 种 不 同类 型 的 属性 ,CSS 样式 的 应 用 主 
要 有 三 种 形式 : 第 一 种 对 某 一 种 标签 重新 设置 属性 ;第 二 种 对 某 一 种 标 
签 的 特定 属性 进行 设置 ;第 三 种 是 组 合 多 种 属性 自 定义 样式 。 这 三 种 形 
式 定义 时 也 有 所 不 同 。 

(1) 定义 标签 样式 。 

(2) 定义 复合 样式 。 

(3) 定义 类 样式 。 

【问题 4】 如 何 设计 网 页 的 页 面 标题 ? 

网 页 的 页 面 标题 相当 于 商店 的 招牌 ,标题 通常 位 于 页 面 的 上 端 或 中 央 , 清 楚 明 确 地 表 
示 出 来 。 

1) 标题 大 小 、 粗 细 要 合适 

与 其 他 文字 相 比 ,标题 的 字号 应 大 一 些 、 粗 一 点 为 宜 。 在 大 小 相同 的 情况 下 ,加 粗 文 
字 也 能 产生 强化 的 效果 。 但 是 标题 也 不 能 过 度 放 大 ,应 该 选择 与 主页 风格 相 和 谐 的 字号 、 
粗细 以 及 配色 。 

2) 标题 使 用 鲜艳 的 色彩 

标题 使 用 鲜艳 的 色彩 可 以 起 到 强化 标题 的 作用 , 当 基 于 特定 风格 的 要 求 而 不 得 不 将 
文字 缩小 时 ,鲜艳 的 色彩 能 够 有 效 地 保持 文字 的 强度 ,使 标题 得 到 强化 ,使 其 效果 清晰 、 引 
人 瞩目 。 

3) 利用 空间 突出 标题 

标题 周围 留 出 一 定 的 空间 ,使 标题 文字 具有 更 加 强烈 而 醒目 的 效果 。 

【问题 5】 如 何 设计 网 页 中 的 页 面 文字 ? 

网 页 最 基本 的 作用 是 传递 信息 ,信息 最 好 的 载体 就 是 文字 。 网 页 中 主要 通过 文字 来 
传递 给 浏览 者 一 定 的 信息 。 合 理 地 将 文字 和 图 像 结合 起 来 ,使 整个 网 页 更 加 有 吸引 力 。 

(1) 文字 字体 的 选择 。 

(2) 文字 粗细 的 确定 。 

(3) 文字 字号 的 确定 。 

(4) 文字 的 字 间 距 和 行 间距 。 

【问题 6】 设置 网 页 中 文本 颜色 的 方法 主要 有 哪些 ? 

设置 网 页 中 文件 颜色 的 方法 主要 有 以 下 三 种 。 

(1) 在 “颜色 ”文本 框 中 输入 以 十 六 进 制 RGB 值 表示 的 颜色 值 , 如 *# DDF4FC”, 十 
六 进 制 RGB 值 颜色 以 符号 * 井 ”开头 ,由 6 位 数字 组 成 ,每 个 数字 取 从 “1” 到 “F” 的 十 六 进 
制 数值 。 如 果 6 位 数字 相同 ,可 以 缩写 为 3 位 。 

(2) 单 击 “ 颜 色 ” 文 本 框 旁 边 的 国 按 钮 ,弹出 颜色 选择 器 ,从 中 可 以 选择 合适 的 颜色 。 

(3) HTML 预 设 了 一 些 颜 色 名 称 ,在 【颜色 ] 文 本 框 里 直接 输入 这 个 颜色 的 名 称 设置 
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相应 颜色 ,例如 在 【颜色 】 文 本 框 中 输入 blue, 可 以 设置 颜色 为 蓝 色 。 常 用 的 预 设 颜色 名 
称 有 16 种 , 即 aqua( 水 绿 )、black( 黑 ) .olive( 橄 榄 ) teal( 深 青 ) red( 红 )、blue( 蓝 )、 
maroon( 褐 ) .navy( 深 蓝 )、gray( 灰 )、lime( 浅 绿 )、fuchsia( 紫 红 )、white( 白 )、green( 绿 )、 
purple( 紫 ) ,silver( 银 ) 和 yellow( 黄 )。 

【问题 7】 何谓 色彩 的 三 原色 ? 色彩 的 三 要 素 是 指 什么 ? 

色彩 的 三 原色 是 能 够 按照 一 些 数量 规定 合成 其 他 任何 一 种 颜色 的 基色 。 所 有 的 颜色 
其 实 都 是 由 三 原色 按照 不 同 的 比例 混合 而 来 。 计 算 机 屏幕 的 色彩 是 由 红 、 绿 、 蓝 三 种 原色 
组 成 。 

色彩 三 要 素 是 指 色相 、 饱 和 度 和 明度 ,自然 界 的 颜色 可 分 为 彩色 和 非 彩色 两 大 类 , 非 
彩色 是 指 黑色 、 白 色 和 各 种 深浅 不 一 的 灰色 ,其 他 所 有 颜色 均 属于 彩色 。 

色相 是 色彩 的 相貌 颜色 的 属性 ,也 就 是 区 分 色彩 各 类 的 名 称 ,例如 “红色 ”代表 一 个 
具体 的 色相 。 色 相 由 波长 决定 ,例如 天 蓝 、 蓝 色 靛蓝 是 同一 色相 ,它们 看 上 去 有 区 别 是 因 
为 明度 和 饱和 度 不 同 。 

饱和 度 又 叫 纯度 ,是 指 色彩 的 纯净 程度 ,也 可 以 说 是 色相 感觉 鲜艳 或 灰暗 的 程度 。 

明度 是 指 色彩 的 明暗 程度 ,体现 颜色 的 深浅 。 它 是 全 部 色彩 都 具有 的 属性 ,最 适合 表 
现 物 体 的 立体 感 和 空间 感 。 

非 彩色 只 有 明度 特征 ,没有 色相 和 饱和 度 的 区 别 。 

【问题 8】 网 页 页 面色 彩 的 搭配 有 哪些 技巧 ? 

不 同 的 颜色 给 人 不 同 的 感觉 ,颜色 靠 设 计 者 的 眼光 和 审美 观点 做 出 恰当 的 选择 ,色彩 
选择 总 原则 是 “总 体 协调 .局 部 对 比 ”, 即 网 页 的 整体 色彩 效果 和 谐 , 局 部 或 小 范围 可 以 有 
- 些 强烈 色彩 的 对 比 。 选 择 页 面色 彩 时 应 考虑 以 下 因素 : 文化 ,流行 趋势 ,浏览 群体 ,个 
人 偏好 等 。 网 页 页 面色 彩 的 搭配 有 以 下 技巧 。 

(1) 特色 鲜明 。 

(2) 搭配 合 

(3) 讲究 艺术 性 。 

(4) 合理 使 用 邻近 色 。 

(5) 合理 使 用 对 比 色 。 

(6) 巧妙 地 使 用 背景 色 。 

(7) 严格 控制 色彩 的 数量 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答 题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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图 像 是 网 页 中 的 主要 元 素 之 一 ,图 像 不 但 能 美化 网 页 ,而且 能 够 更 直观 地 表达 信息 。 
在 页 面 中 恰到好处 地 使 用 图 像 ,能 使 网 页 更 加 生动 .形象 和 美观 。 


【知识 尾 备 】 


1. HTMLS 中 常用 的 图 片 标签 
HTML5 的 图 像 标 签 如 表 3-1 所 示 。 


表 3-1 HTMLS 的 图 像 标 签 














标签 名 称 标签 描述 标签 名 称 标签 描述 

<img> 定义 图 像 一 figcaption>> | 定义 figure 元素 的 标题 

<map> 定义 图 像 映射 <figure> 定义 媒介 内 容 的 分 组 ,以 及 它们 
的 标题 

<area> 定义 图 像 地 图 内 部 的 区 域 


1) 二 img 二 标签 
到 img 之 标签 用 于 向 网 页 中 嵌入 一 幅 图 像 。 从 技术 上 讲 , 一 img 之 标签 并 不 会 在 网 页 
中 插入 图 像 , 而 是 从 网 页 上 链接 图 人像。 二 img 二 标签 创建 的 是 被 引用 图 像 的 占 位 空间 。 
二 img 二 标签 有 两 个 必需 的 属性 : src 属性 和 alt 属性 。 


2) 一 figure 二 标签 和 所 figcaption 二 标签 











二 figure 志 标签 表示 一 段 独 立 的 流 内 容 ( 图 像 、 图 表 、 照 片 、 代 码 等 ) ,一般 表示 文档 主 
体 流 内 容 中 的 一 个 独立 单元 ,figure 元 素 的 内 容 应 该 与 主 内 容 相 关 , 但 如 果 被 删除 , 则 不 
应 对 文档 流产 生 影 响 。 使 用 figcaption 元 素 可 以 为 figure 元 素 组 添加 标题 。 向 文档 中 插 
入 带 有 标题 图 像 的 示例 代码 如 下 : 


<figure> 

<figcaption> 九 寨 沟 风光 < /figcaption> 

< img src= "images/t01.jpg" width= "300" height= "220" /> 
</figure> 


其 浏览 效果 如 图 3-1 所 示 。 
< 一 figcaption 过 标签 用 于 定义 二 figure 过 元素 的 标题 , figcaption 元 素 应 该 被 置 于 
figure 元 素 的 第 一 个 或 最 后 一 个 子 元 素 的 位 置 。 
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图 3-1 带 标题 的 图 片 浏览 效果 


2. CSS 的 背景 设置 与 定位 


1) 背景 色 的 设置 

CSS 允许 应 用 纯色 作为 背景 ,可 以 使 用 background-color 属性 为 元 素 设置 背景 色 , 这 
个 属性 接受 任何 合法 的 颜色 值 。background-color 属性 用 于 设置 元 素 的 背景 颜色 ,其 取 
值 为 指定 的 颜色 或 transparent( 默 认 值 即 透明 色 )。 也 就 是 说 ,如 果 一 个 元 素 没 有 指定 背 
景色 ,那么 背景 就 是 透明 的 ,这 样 其 父 元 素 的 背景 才能 可 见 。 一 般 都 不 采用 这 种 方法 进行 
设置 ,如 果 某 个 元 素 的 父 元 素 被 设置 了 背景 色 ,那么 该 元 素 就 可 以 使 用 这 种 形式 恢复 成 透 
明 色 的 效果 。 

定义 背景 颜色 的 示例 代码 如 下 : 

-main { background- color: #fff;} 

p {background- color: gray;} 


如 果 和 希望 背景 色 从 元 素 中 的 文本 向 外 少 有 延伸 ,只 需 增加 一 些 内 边 距 即 可 。 
P {background- color: gray; padding: 20px;} 


可 以 为 网 页 中 的 任何 元 素 设置 背景 颜色 ,也 可 以 为 HTML 的 标签 设置 背景 颜色 。 

2) 背景 图 像 的 设置 

在 CSS3 之 前 ,背景 图 片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 的 。 在 CSS3 中 ,可 以 规定 
背景 图 片 的 尺寸 ,这 就 允许 我 们 在 不 同 的 环境 中 重复 使 用 背景 图 片 。 可 以 以 像素 或 百 分 
比 规定 尺寸 ,如 果 以 百分比 规定 尺寸 ,那么 尺寸 相对 于 父 元 素 的 宽度 和 高 度 。 

背景 图 像 可 以 作为 修饰 要 素 在 网 页 布局 与 排版 中 使 用 ,CSS 为 了 实现 网 页 背景 图 像 
广泛 应 用 ,提供 了 大 量 的 属性 , 且 得 到 了 各 大 浏览 器 的 广泛 支持 ,综合 利用 这 些 属性 可 以 
提高 网 页 布局 和 排版 的 灵活 性 和 适应 能 力 。 

CSS 也 允许 使 用 背景 图 像 创 建 相 当 复 杂 的 效果 ,要 把 图 像 放 入 背景 ,需要 使 用 
background-image 属性 ,该 属性 的 默认 值 是 none: 表 示 背 景 上 没有 放置 任何 图 像 。 如 果 
需要 设置 一 个 背景 图 像 ,必须 为 这 个 属性 设置 一 个 URL 值 ,示例 代码 如 下 : 





body {background- image: Url (bg 01.gif);} 
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大 多 数 背景 都 应 用 到 body 元 素 ,不 过 并 不 仅 限 于 此 。 下 面 的 示例 代码 为 一 个 段落 
应 用 了 一 个 背景 ,而 不 会 对 文档 的 其 他 部 分 应 用 背景 。 


p.flower {background- image: Url (bg 02.gif);} 
甚至 可 以 为 行内 元 素 设 置 背景 图 像 , 下 面 的 示例 代码 为 一 个 链接 设置 了 背景 图 像 。 
a.radio {background- image: url (bg 03.gif);} 


background-image 也 不 能 继承 ,事实 上 ,所 有 背景 属性 都 不 能 继承 。 

(1) background-image。background-image 属性 用 于 定义 对 象 的 背景 图 像 , 当 背景 
图 像 与 背景 颜色 (background-color) 同 时 被 定义 时 ,背景 图 像 覆 盖 于 背景 颜色 之 上 。 其 
取 值 可 以 为 none( 无 背景 图 像 ) 或 者 为 图 像 地 址 ,可 以 使 用 绝对 或 相对 地 址 指定 背景 
图 像 。 

(2) background-size。background-size 属性 用 于 定义 背景 图 像 的 尺寸 ,其 属性 值 可 
以 为 数值 或 者 auto, 也 可 以 是 percentage、cover 和 contain。 示 例 代 码 如 下 : 


background- size: 200px; 
background- size: 200px 100px; 
background- size: auto 200px; 
background- size: 50% 25% 7 
background- size: contain; 


background- size: cover; 


如 果 属 性 值 为 数值 或 者 auto, 用 于 设置 背景 图 像 的 高 度 和 宽度 ,第 1 个 值 设 置 背景 图 
的 宽度 ,第 2 个 值 设置 背景 图 的 高 度 ,其 单位 可 以 为 像素 (px) 或 者 百分比 (%) ,如果 只 设 
置 1 个 值 , 则 第 2 个 值 会 被 设置 为 auto。 

如 果 属 性 值 为 percentage, 则 width 和 height 是 针对 背景 区 域 ,不 是 背景 图 像 大 小 。 
以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 ,同样 第 1 个 值 设 置 宽度 ,第 2 个 值 设置 
高 度 。 如 果 只 设置 1 个 值 , 则 第 2 个 值 会 被 设置 为 auto。 

如 果 属 性 值 为 cover, 则 把 背景 图 像 扩 展 至 足够 大 ,以 使 背景 图 像 完全 覆盖 背景 区 域 。 
背景 图 像 的 某 些 部 分 也 许 无 法 显示 在 背景 定位 区 域 中 。 

如 果 属 性 值 为 contain, 则 把 背景 图 像 扩 展 至 最 大 尺寸 ,以 使 其 宽度 和 高 度 完全 适应 
内 容 区 域 。 

(3) background-position。background-position 属性 用 于 定义 对 象 背景 图 像 的 位 置 ， 
应 先 定 义 对 象 的 background-image 属性 ,该 属性 不 受 对 象 的 填充 属性 padding 的 影响 。 
默认 值 为 0, 即 背景 图 像 默 认 位 于 对 象 内 容 区 块 的 左上 和 角 。 如 果 只 指定 了 一 个 值 , 该 值 将 
用 于 横 坐 标 , 纵 坐 标 默认 为 50%。 如 果 指 定 了 两 个 值 ,第 一 个 值 用 于 横 坐 标 ,第 二 个 值 用 
于 纵 坐标 。 

背景 图 像 的 位 置 由 background-position-x 和 background-position-y 两 个 属性 综合 确 
定 。background-position-x 定位 背景 图 像 的 横 坐 标 位 置 ,默认 值 为 0, 其 取 值 包括 left、 
center ,right 和 数值 。background-position-y 定位 背景 图 像 的 纵 坐 标 位 置 ,默认 值 为 0, 其 
取 值 包括 top ,center\bottom 和 数值 。 当 背景 图 像 的 位 置 坐标 定义 为 数值 时 ,单位 可 以 取 
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长 度 单位 ,也 可 以 为 百分比 。 
下 面 的 示例 代码 在 body 元 素 中 将 一 个 背景 图 像 居中 放置 。 


body { 
background- image:url ('bg 03.gif'); 
background- repeat:no- repeat7 
background- position:center; 

} 


(4) background-repeat。background-repeat 属性 用 于 定义 对 象 的 背景 图 像 是 否 重复 
以 及 如 何平 铺 , 应 先 定义 对 象 的 background-image 属性 。 其 取 值 包括 repeat( 重 复 , 即 背 
景 图 像 在 纵向 和 横向 上 都 平 铺 ) .no-repeat( 不 重复 ) ,repeat-x( 横 向 平 铺 ) 和 repeat-y( 纵 
向 平 铺 ) 。 

如 果 需 要 在 页 面 上 对 背景 图 像 进行 平 铺 ,可 以 使 用 background-repeat 属性 。 属 性 值 
repeat 导致 图 像 在 水 平 垂直 方向 上 都 平 铺 ,就 像 以 往 背 景 图 像 的 通常 做 法 一 样 。repeat-x 
和 repeat-y 分 别 导 致 图 像 只 在 水 平 或 垂直 方向 上 重复 ,no-repeat 则 不 允许 图 像 在 任何 方 
向 上 平 铺 。 背 景 图 像 默 认 将 从 一 个 元 素 的 左上 和 角 开 始 , 示 例 代 码 如 下 : 


body { 
background- image: url (bg 03.gif)， 
background- repeat: repeat— y; 
} 
网 页 设计 时 ,经 常 使 用 横向 重复 属性 使 一 些小 图 片 形成 大 的 背景 图 像 ,主要 应 用 于 导 
航 栏 ,标题 栏 以 及 按钮 等 。 
(5) background-origin。background-origin 属性 用 于 规定 背景 图 片 的 定位 区 域 , 背 
景 图 片 可 以 放置 于 content-box、padding-box 或 border-box 区 域 ,示意 图 如 图 3-2 所 示 。 








3-2 ”背景 图 片 放置 位 置 的 示意 图 


在 content-box 中 定位 背景 图 片 的 示例 代码 如 下 : 


div{ 
background:url (bg flower.gif)7 
background- repeat :no- repeat; 
background- size:100% 100% ; 


background- origin:content— box; 


| 
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(6) background-attachment。background-attachment 属性 用 于 定义 背景 图 像 是 否 
随 对 象 内 容 滚 动 还 是 固定 位 置 。 其 取 值 包括 scroll( 背 景 图 像 随 对 象 内 容 滚动 ) 和 fixed 
(背景 图 像 处 在 固定 位 置 ) ,默认 值 是 scroll, 也 就 是 说 在 默认 的 情况 下 ,背景 会 随 文档 
滚动 。 

如 果 文 档 比较 长 ,那么 当 文档 向 下 滚动 时 背景 图 像 也 会 随 之 滚动 , 当 文档 滚动 到 超过 
图 像 的 位 置 时 图 像 就 会 消失 。 可 以 通过 background-attachment 属性 防止 这 种 滚动 ,通过 
这 个 属性 ,可 以 声明 图 像 相 对 于 可 视 区 是 固定 的 (fixed) ,因此 不 会 受到 滚动 的 影响 。 

对 于 背景 图 像 固定 的 页 面 ,浏览 网 页 时 可 以 看 到 页 面 滚动 时 背景 仍 保持 固定 ,网 页 中 
的 内 容 可 以 浮动 在 背景 图 像 的 不 同位 置 。 背 景 图 像 固 定 一 般 用 于 整个 网 页 的 背景 设置 ， 
即 设置 body 标签 的 背景 属性 ,示例 代码 如 下 : 


body { 
background- attachment: fixed; 
background- image: Url (../images/bg0301. jpg); 
background- repeat: repeat— y; 

} 

(7) background。background 属性 是 一 个 复合 属性 ,可 以 快速 定义 背景 图 像 , 其 组 成 
包括 background-color、 background-image、 background-position、background-repeat 和 
background-attachment ,默认 值 为 transparent none repeat scroll 0, 如 果 其 单个 属性 没有 
显 式 定义 , 则 取 其 默认 值 ,示例 代码 如 下 : 


background: # c63 url (images/0303bg01.gif) repeat- x left top fixed; 
该 属性 不 可 继承 ,如 果 未 指定 ,其 父 元 素 的 背景 颜色 和 背景 图 像 将 在 元 素 下 面 显示 。 
3. 背景 定位 的 方法 


1) 应 用 位 置 关键 字 

图 像 放 置 关键 字 最 容易 理解 ,其 作用 如 其 名 称 所 表明 的 。 例 如 ,top right 使 图 像 放 
置 在 元 素 内 边 距 区 的 右上 角 。 根 据 规 范 ,位 置 关 键 字 可 以 按 任何 顺序 出 现 ,只 要 保证 不 超 
过 两 个 关键 字 ( 一 个 对 应 水 平方 向 , 另 一 个 对 应 垂直 方向 ) 。 如 果 只 出 现 一 个 关键 字 , 则 认 
为 另 一 个 关键 字 是 center。 所 以 ,如 果 和 希望 每 个 段落 的 中 部 上 方 出 现 一 个 图 像 ,只 需 声 明 
如 下 所 示 的 代码 。 


pl 
background- image:url ('bgimg.gif"); 
background- repeat :no- repeat; 
background- position:top; 

} 


2) 应 用 百分数 值 

百分数 值 的 表现 方式 更 为 复杂 。 假 设 希 望 用 百分数 值 将 图 像 在 其 元 素 中 居中 ,这 很 
容易 ,示例 代码 如 下 : 
了 
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body { 
background- image:url ('bg 03.gif"'); 
background- repeat :no- repeat; 
background- position:50% 50g% 7 

} 


这 会 导致 图 像 适 当 放置 ,其 中 心 与 其 元 素 的 中 心 对 齐 。 换 句 话说 ,百分数 值 同时 应 用 
于 元 素 和 图 像 。 也 就 是 说 ,图 像 中 描述 为 “50% 50% ?的 点 (中 心 点 ) 与 元 素 中 描述 为 
“50% 50%” 的 点 (中 心 点 ) 对 齐 。 如 果 图 像 位 于 “0 0”, 其 左上 角 将 放 在 元 素 内 边 距 区 的 
左上 角 ; 如 果 图 像 位 置 是 *100% 100%”, 会 使 图 像 的 右 下 角 放 在 右边 距 的 右 下 角 。 
因此 ,如 果 想 把 一 个 图 像 放 在 水 平方 向 2/3、 垂 直方 向 1/3 处 ,其 代码 如 下 : 








body { 
background- image:url ('bg 03.gif"); 
background- repeat :no- repeat; 
background- position:66% 33%; 

} 


如 果 只 提供 一 个 百分数 值 ,所 提供 的 这 个 值 将 用 作 水 平 值 ,垂直 值 将 假设 为 50%。 
这 一 点 与 关键 字 类 似 。background-position 的 默认 值 是 “0 0”, 在 功能 上 相当 于 “top 
left”"。 这 就 解释 了 背景 图 像 为 什么 总 是 从 元 素 内 边 距 区 的 左上 角 开 始 平 铺 , 除 非 设置 了 
不 同 的 位 置 值 。 

3) 应 用 长 度 值 

长 度 值 解释 的 是 元 素 内 边 距 距 左 上 角 的 偏 移 , 偏 移 点 是 图 像 的 左上 角 。 例 如 ,如 果 设 
置 值 为 "50px 100px”, 图 像 的 左上 角 将 在 元 素 内 边 距 距 左上 角 向 右 偏 移 50 像素 、 向 下 偏 
移 100 像素 的 位 置 上 ,对 应 的 代码 如 下 : 


body { 
background- image:url ('bg_03.gif"); 
background- repeat :no- repeat; 
background- position:50px 100px; 

} 


4. 图 像 的 透明 度 


通过 CSS 创建 透明 图 像 是 很 容易 的 ,定义 透明 效果 的 CSS3 属性 是 opacity。CSS 的 
opacity 属性 是 W3C CSS 推荐 标准 的 一 部 分 。 

1) 创建 透明 图 像 

创建 透明 图 像 的 CSS 代码 如 下 : 





img { 
opacity:0.4; 
filter:alpha (opacity= 40); /* 针对 IE8 以 及 更 早 的 版 本 * / 


23 


HTML5+ CSS3 跨 平台 网 页 设计 实例 教程 





能 够 
(opa 


opac 


移出 


IE9 \Firefox、Chrome、Opera 和 Safari 使 用 属性 opacity 来 设 定 透明 度 。opacity 属性 
设置 的 值 为 0.0 一 1. 0, 值 越 小 , 越 透 明 。IE8 以 及 更 早 的 版 本 使 用 滤 镜 filter: alpha 
city 一 x) 来 设 定 透明 度 ,x 能 够 取 的 值 为 0 一 100。 值 越 小 , 越 透明 。 

2) 创建 透明 图 像 的 hover 效果 

将 鼠标 指针 移动 到 图 片上 时 ,会 改变 图 片 的 透明 度 ,实现 图 像 透明 度 的 hover 效果 。 
创建 透明 图 像 的 hover 效果 的 CSS 代码 如 下 : 





img { 
opacity:0.4; 
filter:alpha (opacity= 40); /< 针对 IE8 以 及 更 早 的 版 本 * / 


img:hover { 
opacity:1.0; 
filter:alpha (opacity=100); /* 针对 IE8 以 及 更 早 的 版 本 * / 


在 这 个 实例 中 , 当 指 针 移 动 到 图 像 上 时 ,我 们 希望 图 像 是 不 透明 的 ,对 应 的 CSS 是 
ity 王 1,IE8 以 及 更 早 的 浏览 器 则 设置 为 : filter: alpha(opacity 二 100)。 当 鼠标 指针 
图 像 后 ,图 像 会 再 次 透明 。 





【5 引导 训练 】 


任务 3-1 制作 介绍 九寨沟 景区 景点 的 
图 文 混 排 网 页 


【任务 描述 】 


任务 3-1-1 使 用 [管理 站 点 对 话 框 创建 站 点 “单元 3” 

任务 3-1-2 应 用 [文件 面板 新 建 网 页 0301. html 

任务 3-1-3 设置 页 面 的 背景 图 像 

任务 3-1-4 在 网 页 中 输入 所 需 的 文本 内 容 与 设置 文本 格式 

(1) 在 网 页 0301. html 中 输入 所 需 的 文本 内 容 。 

(2) 将 网 页 0301. html 的 标题 设置 为 “ 诺 日 朗 群 海 ”。 

(3) 将 网 页 0301. html 中 文本 标题 “ 诺 日 朗 群 海 的 字体 设置 为 “黑体 ”, 大 小 设置 为 


“18 像素 ,颜色 设置 为 #0000FF ,对 齐 方式 设置 为 “居中 对 齐 ”, 目 标 规则 为 “内 联 样式 ”。 


(4) 将 网 页 0301. html 中 正文 文本 的 字体 设置 为 "宋体 ,大 小 设置 为 "14 像素 ”, 样 式 


名 称 命名 为 style6 。 
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任务 3-1-5 插入 图 像 与 设置 图 像 属性 
(1) 在 网 页 0301. html 中 插入 图 像 t01. jpg, 且 设置 其 属性 : 宽 为 600px, 高 为 400px， 


单元 3 网 页 中 图 像 与 背景 的 应 用 设计 


替换 文本 为 “ 诺 日 朗 群 海 ”, 垂 直 边 距 为 15px, 水 平 边 距 为 10px, 对 齐 方式 为 “居中 对 齐 ”。 
(2) 在 网 页 0301. html 中 插入 图 像 102. jpg、t03. jpg、t04. jpg 和 t05. jpg, 且 设置 各 个 
图 像 的 属性 : 宽 为 150px, 高 为 100px; 蔡 换文 本 分 别 为 “图 2”“ 图 3”“ 图 4” 和 “图 5” ,垂直 
边 距 为 10px, 水 平 边 距 为 50px, 对 齐 方式 为 “居中 对 齐 ”。 
任务 3-1-6 在 “代码 "视图 中 查看 CSS 代码 和 HTML 代码 


【任务 多 施 】 


任务 3-1-1 使 用 [管理 站 点 ] 对 话 框 创建 站 点 “单元 3” 


1. 创建 所 需 的 文件 夹 


在 文件 夹 "HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit03。 然 后 在 文件 夹 
Unit03 中 创建 子 文件 夹 0301, 再 在 该 子 文件 夹 0301 中 创建 images、text 等 子 文件 夹 , 且 
将 所 需 的 素材 复制 到 对 应 的 子 文件 夹 中 。 


2. 启动 Dreamweaver CC 
使 用 Windows 的 [开始] 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 打开 【管理 站 点 ] 对 话 框 


在 Dreamweaver CC 的 主 界面 ,选择 [站 点 】>【 管 理 站 点 命令 ,打开 如 图 3-3 所 示 的 
【管理 站 点 】 对 话 框 。 








3-3 【管理 站 点 ] 对 话 框 


4. 打开 【站 点 设置 对 象 ] 对 话 框 


在 【管理 站 点 了 对 话 框 中 单 击 【新 建站 点 了 按钮 ,打开 [站 点 设置 对 象 】 对 话 框 ,在 【站 点 
名 称 ] 文 本 框 中 输入 站 点 名 称 “ 单 元 3” ,在 【本 地 站 点 文件 夹 文 本 框 中 输入 完整 的 路 径 名 
称 "E:XHTML5 十 CSS3 网 页 设计 实例 \Unit03\”, 如 图 3-4 所 示 。 
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图 3-4 【站 点 设置 对 象 ] 对 话 框 


在 [站 点 设置 对 象 〗 对 话 框 中 单 击 【保存 3 按钮 ,保存 创建 的 站 点 ,返回 [管理 站 点 】 对 话 
框 ,如 图 3-5 所 示 。 我 们 可 以 发 现在 站 点 列表 中 增加 了 1 个 站 点 选项 “单元 3”。 如 果 需 要 
对 站 点 信息 进行 修改 ,可 以 在 【管理 站 点 对 话 框 中 单 击 【编辑 当前 选 定 的 站 点 了 按钮 加 | 
重新 打开 [站 点 设置 对 象 3 对 话 框 ,对 站 点 信息 进行 修改 即 可 。 


管理 站 点 x 











3-5 新 建站 点 “单元 3” 后 的 [管理 站 点 对 话 框 
在 [管理 站 点 ] 对 话 框 中 单 击 [完成 ] 按 钮 ,新 建站 点 便 完成 。 
任务 3-1-2 ”应 用 【文件 了 面板 新 建 网 页 0301. html 


1. 打开 【文件 】 面 板 


如 果 [ 文 件 ] 面 板 处 理 隐 藏 状态 , 则 选择 [窗口 >【 文 件 ] 命 令 , 可 打开 [文件 面板 。 
提示 : 如 有 果 【 文 件 】 面 板 处 于 打开 状态 ,在 【窗口 】 下 拉 菜 单 的 【文件 了 菜单 项 左 侧 会 有 
1 个 “VY” 标记 ,此 时 再 次 单 击 【文件 菜单 项 , 则 会 关闭 该 面板 。 


2. 新 建 网 页 文档 


在 [文件] 面板 中 站 点 “单元 3” 的 文件 夹 0301 上 右 击 ,在 弹出 的 快捷 菜单 中 单 击 【 新 
建文 件 ] 命 令 , 如 图 3-6 所 示 。 然 后 输入 新 的 网 页 文档 名 称 0301. html, 按 Enter 键 确认 ， 
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结果 如 图 3-7 所 示 。 





图 3-6 【新 建文 件 ] 命 令 


任务 3-1-3 设置 页 面 的 背景 图 像 





3-7 新 建 1 个 网 页 文档 


1. 打开 新 建 的 网 页 文档 0301. html 
在 【文件 了】 面板 中 双击 网 页 文档 名 称 0301. html, 在 Dreamweaver CC 的 文档 窗口 中 打 


开 该 网 页 文档 。 
2. 设置 网 页 的 背景 图 像 


单 击 【属性 了 面板 上 的 【页 面 属 性 了 按钮 ,打开 【页 面 属性 】 对 话 框 ,在 【页 面 属性 对 
话 框 中 ”外观 (CSS) ”属性 组 中 单 击 背景 图 像 文本 框 右 侧 的 [浏览 ] 按 钮 ,弹出 【选择 图 像 
源 文件 ] 对 话 框 ,在 该 对 话 框 中 搜索 到 所 要 设置 的 背景 图 像 文件 bg-gray. png, 如 图 3-8 








所 示 。 
国 壹 图像 源 文件 X 
€ ~ 个 站 «0301 > images Y 已 搜索 "images” 岂 
组 织 ”新 建文 件 到 中 ~ 中 @ 
> 旺 union ” Ess Bi 
> 国 unito2 Boljpg travel-bg.png 
~ 由 Unito3 vw2jpg 了 Btravel-bg-map.png 
v 轩 0301 图 “四 taipe 
images ss 
| text ~ “JP9 
相对 于 : | 文档 ~ 














文件 S(N): |bg-gray.png 





| 图 你 文件 (.gif*jpg;"jpeg;.p 



































图 3-8 【选择 图 像 源 文件 ] 对 话 框 


单 击 【确定 按钮 ,返回 【页 面 属性 对话 框 ,如 图 3-9 所 示 。 然 后 单 击 【页 面 属性 对话 
框 中 的 【确定 了 按钮 ,这样 就 为 网 页 设置 了 所 需 的 背景 图 像 。 
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图 3-9 【页 面 属性 ] 对 话 框 


任务 3-1-4 在 网 页 中 输入 所 需 的 文本 内 容 与 设置 文本 格式 
1. 在 网 页 中 输入 所 需 的 文本 内 容 
在 网 页 0301. html 中 输入 以 下 文本 内 容 。 


诺 日 朗 群 海 


诺 日 朗 群 海 海拔 达 2365 米 ， 是 日 则 沟 的 起 点 。18 个 海子 组 成 的 群 海水 色温 蓝 ， 穿 
林 而 出 的 委 瀑 使 群 海 五 光 十 色 。 春 夏 时 堤 垣 柳暗花明 ， 湖 水 充满 生机 ; 秋天 红叶 如 


火 ， 湖 水 一 片 灿烂 ; 冬季 水 凝 成 冰 ， 一 派 冰清玉洁 。 





2. 设置 网 页 0301. html 的 文本 格式 


在 正文 段落 的 开始 位 置 插入 2 个 空格 。 在 【属性 了 面板 中 单 击 左下 角 的 【CSS] 按 钮 ， 
切换 到 CSS【 属 性 ] 面 板 。 

选择 页 面 文本 的 标题 “ 诺 日 朗 群 海 ”, 然 后 在 【属性 面板 的 “字体 ”下 拉 列 表 框 中 选择 
字体 “黑体 ”, 接 着 将 大 小 设置 为 “18 像素 ”, 颜 色 设置 为 并 0000FF ,对 齐 方式 设置 为 “居中 
对 齐 ”, 目 标 规则 为 “内 联 样式 ”。CSS 的 【属性 了 面板 如 图 3-10 所 示 。 





3-10 ”CSS 的 属性 设置 


以 类 似 的 方法 将 页 面 正文 文本 的 字体 设置 为 “宋体 ”, 大 小 设置 为 “14 像素 ”。 
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3. 设置 网 页 标题 

在 [文档 工具 栏 的 “标题 "文本 框 中 输入 网 页 的 标题 “ 诺 日 朗 群 海 ”。 

4. 保存 网 页 

单 击 【标准 工具 栏 中 的 [保存 3 按钮 或 【全 部 保存 按钮 ,保存 网 页 的 属性 设置 。 
5. 预览 网 页 效果 

按 F12 预览 网 页 的 效果 如 图 3-11 所 示 。 


诺 日 朗 群 海 
诺 日 朗 群 海 海拔 达 2365 米 ， 是 日 刚 沟 的 起 点 。18 个 海子 组 成 的 群 海水 色 





湛蓝 ， 弃 林 而 出 的 益 瀑 使 群 海 五 光 十 色 。 Ce 潮水 元 湛 生 
机 ; 秋天 红叶 如 火 ， 潮水 一 片 灿 烂 ; 冬季 水 北 成 冰 ， 一 派 冰 清 王 洁 


图 3-11 网 页 “0301. html” 的 分 步 预 览 效 果 


任务 3-1-5 插入 图 像 与 设置 图 像 届 性 
1. 插入 第 1 幅 图 像 


将 光标 置 于 标题 “ 诺 日 朗 群 海 ” 右 侧 , 按 Enter 键 换行 , 且 设 置 对 齐 方式 为 “居中 对 
齐 ”。 然后 选择 [插入 】>image 命令 ,在 弹出 的 【选择 图 像 源 文件 3 对 话 框 中 选择 images 
文件 夹 中 的 图 像 文件 t01. jpg, 如 图 3-12 所 示 。 


园 选择 图 像 源 文件 























x 
个 « 0301 ，images Y 局 搜索 -images” Pp 
组 织 ” 。 新 建文 件 夫 上 ~ mm @@ 
> 加 Unto ”“ bo-graypng to6jpg 
》 国 Unit02 Rtravel-bg.png 
v unto3 同 travel-bg-map.png 
v 晶 oao 
images 
text 
文件 名 (N): |t01jpg ~ | | 图 文件 (.gif"jpg;*jpeg:*p ~ 
Fe ] 
[aaa | [| 














3-12 ”在 【选择 图 像 源 文件 ] 对 话 框 中 选择 图 像 文 件 


在 【选择 图 像 源 文件 3 对 话 框 中 单 击 【确定 3 按钮 , 即 可 在 网 页 0301. html 中 搬入 一 幅 
图 像 。 
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2. 设置 第 1 幅 图 像 的 属性 


选中 插入 的 第 1 幅 图 像 ,在 [属性 了 面板 的 “ 宽 " 文 本 框 中 输入 600 ,在 “高 "文本 框 中 输 
入 400, 默 认 单位 均 为 px; 然 后 在 【 蔡 换 了 文本 框 中 输入 * 诺 日 朗 群 海 ” 民 属性 了 面板 中 的 设 
置 结 果 如 图 3-13 所 示 。 





3-13 图 像 t01. jpg 的 属性 设置 


在 Dreamweaver CC 的 主 窗 体 【 文 档 工 具 栏 中 单 击 【 代 码 ] 按 钮 ,切换 到 “代码 ”编辑 
窗口 ,在 第 1 幅 图 像 的 标签 二 img 之 中 添加 以 下 设置 垂直 边 距 和 水 平 边 距 的 代码 。 


hspace= "10" vspace= "15" 

该 图 像 对 应 的 <img 二 标签 完整 的 代码 如 下 : 

< img src= "images/t01.jpg" width="600" height= "400" alt=" 诺 日 朗 群 海 " hspace= "10" vspace 
="15"/> 

3. 插入 第 2 幅 图 像 


在 Dreamweaver CC 的 主 窗 体 【 文 档 ] 工 具 栏 中 单 击 [设计 了 按钮 ,切换 到 “设计 ”窗口 ， 
将 光标 置 于 文本 之 后 , 按 Enter 键 换行 ,上 且 设置 对 齐 方式 为 “居中 对 齐 ”。 然 后 按照 类 似 的 
方法 插入 4 幅 图 像 , 即 文件 夹 images 中 图 像 t02. jpg、t03. jpg、t04. jpg 和 {05. jpg。 

4. 设置 4 幅 图 像 的 属性 


选中 插入 的 第 2 幅 图 像 t02. jpg; 在 【属性 面板 的 “ 宽 ” 文 本 框 中 输入 150, 在 “高 ” 
文本 框 中 输入 100, 默 认 单 位 均 为 “像素 ”。 在 “替换 ”列表 框 中 输入 “图 2 作为 替换 
文本 。 

同样 ,切换 到 [代码 ] 编 辑 区 ,在 第 2 幅 图 像 t02. jpg 的 标签 过 img 二 添加 以 下 代码 。 

hspace="5" vspace= "10" 

以 同样 的 方法 插入 其 他 3 幅 图 像 103. jpg、t04. jpg 和 t05. jpg, 并 设置 各 个 图 像 的 
属性 。 

5. 保存 与 浏览 网 页 


保存 网 页 中 插入 的 图 像 和 设置 的 图 像 属 性 , 按 F12 键 浏览 图 文 混 排 网 页 的 效果 ,如 
图 3-14 所 示 。 
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诺 日 朗 群 海 





诺 日 朗 群 海 海拔 达 2365 米 ， 是 日 风 沟 的 起 点 。18 个 海子 组 成 的 群 海水 色 湛蓝 ， 穿 林 而 出 的 登 温 使 群 海 五 光 
| 二 色 。 夫 夏 时 堤 十 宛 罚 花 明 ， 湖 水 充满 生机 ;秋天 儿 I 时 如 炎 ， 湖水 一 片 灿 烂 ; 冬季 水 凝 成 冰 ， 一 派 冰 清 玉 洁 。 


图 3-14 图 文 混 排 网 页 的 浏览 效果 














任务 3-1-6 在 “代码 ”视图 中 查看 CSS 代码 和 HTML 代码 
1. 切换 到 “代码 ”视图 


在 Dreamweaver CC 主 窗口 【 文 档 工 具 栏 中 单 击 【 代 码 ] 按 钮 , 即 可 切换 到 “代码 ” 
视图 。 


2. 查看 网 页 0301. html 中 的 图 像 标 签 


在 网 页 中 插入 图 像 可 以 起 到 美化 网 页 的 作用 ,插入 图 像 的 标签 只 有 1 个 。 网 页 
0301. html 中 所 插入 的 图 像 t01. jpg 的 HTML 代码 如 表 3-2 所 示 , 所 插入 的 其 他 图 像 的 
HTML 代码 与 图 像 t01. jpg 类 似 。 


表 3-2 图 像 t01.jpg 的 HTML 代码 





行 号 HTML 代码 
01 <img src= "images/t01.jpg" width= "600" height= "400" alt=" 诺 日 朗 群 海 " 
02 hspace= "10" vspace= "15" /> 
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图 像 标签 属性 的 含义 : src 属性 用 于 指定 图 像 源 文件 所 在 的 路 径 ; width 和 height 用 
于 指定 图 像 的 显示 大 小 ;alt 属性 用 于 指定 提示 文字 ;vspace 用 于 调整 图 像 和 文字 之 间 的 
上 下 距离 ;hspace 用 于 调整 图 像 和 文字 之 间 的 左右 距离 。 


3. 查看 网 页 0301. html 中 的 CSS 样式 代码 


通过 [属性 面板 设置 页 面 背 景 图 像 自动 生成 的 CSS 样式 代码 如 表 3-3 所 示 。 表 3-3 
中 03 行 是 页 面 背景 图 像 的 代码 。 


表 3-3 网 页 0301. html 中 的 CSS 样式 





行 号 HTML 代码 
01 <style type= "text/css"> 
02 | body { 
03 background- image: url (images/bg- gray.png); 


04 } 
05 </style> 





任务 3-2 使 用 CSS 美 化 网 页 文本 与 图 片 


【任务 模 述 】 


(1) 打开 现 有 的 CSS 样式 文件 base. css, 认 识 网 页 标签 的 属性 设置 。 

(2) 创建 CSS 样式 文件 main. css, 在 该 样式 文件 定义 所 需 的 CSS 代码 ,通过 CSS 代 
码 的 定义 与 分 析 熟 悉 HTML 的 元 素 类 型 .CSS 的 样式 规则 、CSS 的 选择 符 、CSS 的 属性 
定义 及 属性 值 的 单位 等 方面 的 内 容 。 

(3) 在 网 页 中 输入 以 下 HTML 标签 及 文字 。 





<div id= "top"> 
<div>< img src= "images/t01.jpg">< /div> 
</div> 
<div class= "content"> 
<p> 阿 坝 州 地 处 四 川 盆地 与 青藏 高 原 的 接合 部 ,总 面积 为 8.42 万 平方 公里 ,总 人 口 90 余 
万 ,是 以 藏族 ,羌族 为 主 的 少数 民族 自治 州 。 境 内 自然 风光 雄 秀 、 历 史 人 文 璀璨 \ 生 态 气 
候 优 越 , 拥 有 九寨 沟 、 黄 龙 、 大 熊猫 栖息 地 三 处 世界 自然 遗产 ,被 誉 为 “世界 自然 遗产 之 
乡 ”。</p> 
</div> 
<div id= "bot"><p> 本 内 容 最 终 解释 权 归 阿坝 旅游 所 有 < /p>< /div> 
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(4) 浏览 网 页 0302. html 的 效果 ,如 图 3-15 所 示 。 














本 内 容 最 终 解 释 权 归 阿 坝 旅游 所 有 


图 3-15 ”网 页 0302. html 的 浏览 效果 





【任务 吝 施 】 


1. 创建 文件 夹 

在 站 点 “单元 3” 中 创建 文件 夹 0302, 在 该 文件 夹 中 创建 子 文件 夹 CSS。 
2. 创建 网 页 

在 该 站 点 的 文件 夹 0302 中 创建 网 页 0302. html。 

3. 在 文件 夹 CSS 中 创建 2 个 样式 文件 


在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 定义 所 需 的 CSS 代码 。 
样式 文件 base. css 的 CSS 代码 定义 如 表 3-4 所 示 。 观 察 、 分 析 该 样式 文件 base. css 
中 的 CSS 代码 ,熟悉 CSS 的 样式 规则 、CSS 的 选择 符 、CSS 的 属性 定义 及 属性 值 的 
单位 。 
表 3-4 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 
01 | body { 
02 background- image: url(../images/travel- bg- gray.png); 
03 background- position: left top; 
04 background- repeat: repeat— x; 
05 } 
06 section { 
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续 表 
序号 CSS 代码 
07 width: 1200px; 
08 margin- top: 10px; 
09 $ 
10 div,p{ 
11 margin:0px; 
bb padding:0px; 
13 } 
14 
15 img { 
16 border: none; 
17 Vertical-align: middle; 
18 } 





在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 定义 所 需 的 CSS 代码 。 


文件 main. css 的 CSS 定义 代码 如 表 3-5 所 示 。 


样式 


表 3-5 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 #top,#bot { 19 .content P { 
02 width: 100%; 20 font- family: "微软 雅 黑 "; 
03 max- width: 1920px; 21 font- size:16px; 
04 background: # 09C7 22 text- indent: 32px; 
05 margin: 5px auto; 23 Color: #1999e6; 
06 text-align: center; 24 } 
07 line- height: 35px; 25 
08 } 26 #bot { 
09 27 width: 100% 7 
10 | #top img { 28 height:35px; 
11 width: 100%; 29 line- height: 35px; 
12 height:300px; 30 background- color: #09C; 
XXX } 31 text- align: center; 
14 .Content { 32 Color: #FFO; 
15 width: 100%; 33 font- size:16px; 
16 max— width: 1047px; 34 font- weight :bold; 
17 margin: 10px auto; 35 floats 1eft 
18 } 36 } 
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4. 在 网 页 0302. html 中 插入 所 需 的 标签 和 输入 所 需 的 文字 内 容 


在 网 页 0302. html 中 插 和 人 所 需 的 标签 和 输入 所 需 的 文字 内 容 , 完 整 的 HTML 代码 
如 表 3-6 所 示 。 
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表 3-6 网 页 0302. html 完整 的 HTML 代码 








序号 HTML 代码 
01 | < !doctype html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title> 阿 坝 旅 游 < /title> 
06 <link rel="stylesheet" type= "text/css" href="css/base.css" /> 
07 <link rel="stylesheet" type= "text/css" href="css/main.css" /> 
08 </head> 
09 <body> 
10 <div idq= "top"> 
11 <div>< img src="images/t01.jpg">< /div> 
2 </div> 
13 <div class= "content"> 
14 <p> 阿 坝 州 地 处 四 川 盆 地 与 青藏 高 原 的 接合 部 ,总 面积 为 8.42 万 平方 公里 ,总 人 口 
于 90 余 万 ,是 以 藏族 ,羌族 为 主 的 少数 民族 自治 州 。 境 内 自然 风光 雄 秀 、 历 史 人 文 丙 
16 璨 ,生态 气 候 优越 ,拥有 九寨 沟 、 黄 龙 ,大 熊猫 栖息 地 三 处 世界 自然 遗产 ,被 誉 为 " 世 
17 界 自然 遗产 之 乡 "。< /p> 
18 </div> 
19 <div id="bot"><p> 本 内 容 最 终 解释 权 归 阿坝 旅游 所 有 < /p>< /div> 
20 < /body> 
21 | </html> 


5. 查看 与 编辑 CSS 属性 


在 网 页 的 【设计 了 视图 中 ,将 光标 置 于 图 片 下 的 文字 段落 中 ,在 【属性 了 面板 中 查看 选择 
器 “. content p” 的 属性 设置 ,如 图 3-16 所 示 。 





图 3-16 在 [属性 3 面板 中 查看 选择 器 “. content p” 的 属性 设置 


在 【属性 面板 中 单 击 【编辑 规则 3 按钮 ,打开 【[. content p 的 CSS 规则 定义 (在 main. 
css 中 )】 对 话 框 ,如 图 3-17 所 示 。 在 该 对 话 框 中 可 以 对 选择 器 的 属性 进行 编辑 修改 。 

将 光标 置 于 最 后 的 文本 段落 中 ,分 别 在 【属性 了 面板 和 【CSS 设计 器 了 面板 中 查看 ID 
选择 器 “# bot" 的 属性 设置 ,如 图 3-18 所 示 。 

同样 ,在 【属性 了 面板 中 单 击 【编辑 规则 了 按钮 ,打开 【# bot 的 CSS 规则 定义 (在 main. 
css 中 )】 对 话 框 ,如 图 3-19 所 示 。 在 该 对 话 框 中 可 以 对 选择 器 的 属性 进行 编辑 修改 。 

在 【#bot 的 CSS 规则 定义 (在 main. css 中 )】 对 话 框 左 侧 “分 类 ”列表 中 选择 “背景 ”， 
切换 到 [背景 ] 界 面 ,对 背景 相关 的 属性 进行 编辑 修改 ,如 图 3-20 所 示 。 

在 【#bot 的 CSS 规则 定义 (在 main. css 中 )】 对 话 框 左 侧 分 类 ”列表 中 选择 “区 块 ”， 
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-Content p 的 CSS 规则 定义 (在 main.css 中) x 





图 3-17 在 【. content p 的 CSS 规则 定义 (在 main. css 中 )] 对 话 框 中 
编辑 选择 器 “. content p” 的 属性 设置 





图 3-18 分 别 在 【属性 了 面板 和 [CSS 设计 器 面板 中 
查看 ID 选择 器 “# bot” 的 属性 设置 


切换 到 [区 块 ] 界 面 ,对 区 块 相关 的 属性 进行 编辑 修改 ,如 图 3-21 所 示 。 
在 【#bot 的 CSS 规则 定义 (在 main. css 中 )】 对 话 框 左 侧 [分 类 3 列表 中 选择 “ 方 框 ”， 
切换 到 [ 方 框 ] 界 面 ,对 方 框 相关 的 属性 进行 编辑 修改 ,如 图 3-22 所 示 。 
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#bot 的 CSS 规则 定义 (在 main.css 中 ) x 





3-19 在 【# bot 的 CSS 规则 定义 (在 main. css 中 )] 对 话 框 的 
【类 型 ] 界 面 编辑 属性 设置 


#bot 的 CSS 规则 定义 (在 main.css 中 ) x 


[D9 





图 3-20 ”在 【# bot 的 CSS 规则 定义 (在 main. css 中) 对话 框 的 [背景 】 
界面 编辑 背景 相关 的 属性 设置 





3-21 在 【# bot 的 CSS 规则 定义 (在 main. css 中 )] 对 话 框 的 [区 块 】 
界面 编辑 区 块 相关 的 属性 设置 
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#bot 的 CSS 规则 定义 (在 main.css 中 ) x 





图 3-22 ”在 【# bot 的 CSS 规则 定义 (在 main. css 中 )] 对 话 框 的 [ 方 框 】 
界面 编辑 方 框 相关 的 属性 设置 


6. 保存 与 浏览 网 页 0302. html 
保存 网 页 文档 0302. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 3-15 所 示 。 


任务 3-3 创建 多 张 图 片 并 行 排列 的 
网 页 0303htm 


【任务 冀 述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0303. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0303. html 中 添加 必要 的 HTML 标签 和 输入 文字 。 

(4) 浏览 网 页 0303. html 的 效果 ,如 图 3-23 所 示 ,该 网 页 包含 多 张 图 片 。 


上 


3-23 ”网 页 0303. html 的 浏览 效果 
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【任务 袜 施 】 
1. 创建 文件 夹 
在 站 点 “单元 3” 中 创建 文件 夹 0303, 在 该 文件 夹 中 创建 子 文件 夹 CSS。 
2. 定义 网 页 主体 布局 结构 和 美化 图 片 的 CSS 代码 


在 文件 夹 “CSS” 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 3-7 
所 示 。 


表 3-7 样式 文件 base. css 中 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 | html, body,div, img { 08 | body { 
02 margin: 07 09 line- height: 150% 7 
03 padding: 0; 10 font- weight: bold; 
04 } 11 font- size: 14px; 
05 | img{ ig font- family: "微软 雅 黑 ", "宋体"; 
06 border: none; 13 background: #FFFFFF; 
07 |} 二 | 





在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 主体 
布局 结构 和 美化 图 片 的 CSS 代码 如 表 3-8 所 示 。 


表 3-8 样式 文件 main. css 中 网 页 主体 布局 结构 和 美化 图 片 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 #wrap { 10 .ConDiv img { 
02 margin: 10px auto; 11 width: 150px; 
03 width: 1020px; 12 height: 140px; 
04 } 13 display: block; 
05 .ConDiv { 14 margin- right: Spx; 
06 Width: 100%; 15 float: left; 
07 height: 198px; 16 border- radius: 5px7 
08 margin: 20px auto; 17 border: 5px solid #CCC; 
09 |} 18 | } 














表 3-8 中 的 CSS 代码 “border-radius: 5px; ”实现 了 圆 弧 边框 的 效果 。 
3. 创建 网 页 文档 0303. html 与 链接 外 部 样式 表 


在 文件 夹 0303 中 创建 网 页 文档 0303. html, 切 换 到 网 页 文档 0303. html 的 【代码 视 
图 】, 在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 样式 表 的 代码 ,如 下 所 示 。 


<link type= "text/css" rel= "stylesheet" href="css/base.css"/> 
<link type= "text/css" rel="stylesheet" href= "css/main.css"/> 
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4. 编写 网 页 主体 布局 结构 的 HTML 代码 


网 页 0303. html 主体 布局 结构 的 HTML 代码 如 表 3-9 所 示 。 
表 3-9 网 页 0303. html 主体 布局 结构 的 HTML 代码 





序号 HTML 代码 
01 <div idq= "wrap"> 
02 <div class= "conDiv"> 
03 < ! 一 图 片 位 置 --> 
04 </div> 
05 </div> 





5. 在 网 页 中 插入 图 片 与 设置 图 片 属性 
在 网 页 文档 0303. html 中 插入 图 片 与 设置 图 片 属性 ,HTML 代码 如 表 3-10 所 示 。 


表 3-10 网 页 0303. html 的 HTML 代码 





序号 HTML 代码 
01 <div id= "wrap"> 
02 <div class= "conDiv"> 
03 <img src= "images/t01.jpg" alt=" 图 片 1"/> 
04 < img src= "images/t02.jpg" alt=" 图 片 2"/> 
05 < img src= "images/t03.jpg" alt=" 图 片 3"/> 
06 <img src= "images/t04.jpg" alt=" 图 片 4"/> 
07 <img src= "images/t05.jpg" alt=" 图 片 5"/> 
08 </div> 
09 </div> 





6. 保存 与 浏览 网 页 
保存 网 页 文档 0303. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 3-23 所 示 。 


【同步 训练 】 
任务 3-4 在 网 页 中 设置 图 片 与 背景 属性 


在 网 页 中 输入 以 下 HTML 标签 及 文字 。 
<div>< img src= "images/t01.jpg" alt= "九寨 沟 美 景 "/>< /div> 
针对 上 述 图 片 进行 各 种 类 型 的 图 片 属性 设置 .并 设置 背景 图 像 。 
(1) 设置 多 种 不 同 的 图 片 长 度 和 宽度 。 
(2) 设置 多 种 不 同 的 图 片 边框 。 
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(3) 设置 div 区 域 的 背景 图 像 ,并 设置 背景 图 像 多 种 不 同 的 回 0 
background-repeat background-size、 background-position、 background- 
origin 属性 值 以 及 margin 和 padding 属性 值 。 

提示 : 请 扫描 二 维 码 浏 览 提示 内 容 。 





任务 3-5 创建 图 文 混 排 的 网 页 0305htm 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0305. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0305. html 中 添加 必要 的 HTML 标签 ,插入 图 片 和 输入 文字 。 

(4) 浏览 网 页 0305. html 的 效果 ,如 图 3-24 所 示 ,该 网 页 左 侧 为 1 张 图 片 , 右 侧 为 文 
字 内 容 。 








阿坝 州 风景 区 位 于 长 江 、 黄 河上 游 ， 四 川 省 西北 部 ， 青 梧 





高 原 东南 绢 ， 北 部 与 青海 、 甘 肃 省 相 邻 ， 东 南西 三 面 分 别 与 成 





都 .绵阳 ,德阳 .雅安 .甘孜 等 市 州 接壤 , 总 面积 为 8.42 万 平方 公 
里 。 辖 13 个 县 ( 马尔 唐 县 、 金 川 县 、 小 侈 县、 阿坝 县 、 若 尔 昔 
亦 川 县 ， 理 县 、 茂 县 、 松 潘 县 、 九 际 沟 





县 、 红 
县 、 辕 水 县 ) ，225 个 乡 (镇 ) 。 总 人 口 84 万 ， 其 中 惹 族 占 

52.5% ， 芜 族 占 17,.4% ， 汉 族 占 26.8% ,其 他 民族 占 3.3% , 是 
四 川 省 第 二 大 营区 和 全 国 主要 羌族 涌 怖 区; 也 是 红军 长 征 时 经 











过 的 “雪山 草地 ”…… 更 多 > 


图 3-24 网 页 0305. html 的 浏览 效果 





提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 7 


1. 利用 CSS 样式 设置 图 像 属 性 


(1) 控制 图 像 尺 寸 。 

(2) 控制 图 像 的 边框 。 

(3) 控制 图 像 的 填充 和 边界 。 
(4) 图 像 浮 动 。 

(5) 图 像 的 定位 。 


2. 图 文 混 排 布局 的 实现 技巧 


网 页 设计 时 ,经 常 在 文本 段落 中 插入 恰当 的 图 像 ,实现 对 网 页 的 美化 。 
表 3-11 所 示 的 HTML 代码 可 以 实现 图 片 通栏 布局 效果 ,相关 样式 定义 的 CSS 代码 
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如 表 3-12 所 示 , 其 浏览 效果 如 图 3-25 所 示 。 


表 3-11 实现 图 片 通栏 布局 效果 的 HTML 代码 


HTML 代码 





行 号 
01 <div class= "main"> 
02 < img src= "images/t01.jpg"/> 
03 < img src="images/t02.jpg"> 
04 < img src="images/t03.jpg"> 


05 <h2> 九 寨 沟 < /h2> 


06 <p> 九 寨 沟 位 于 四 川 省 西北 部 岷 山 山 脉 南 段 的 阿坝 藏族 羌族 自治 州 九 寨 沟 县 漳 扎 镇 境内 ， 
07 因 沟 内 有 树 正 、 荷 叶 、 则 查 洼 等 九 个 藏族 村 寨 而 得 名 。 九 寨 沟 年 均 气温 为 6~14'C , 冬 无 严 
08 寒 ,夏季 凉 爽 ,四 季 景 色 各 异 :仲春 树 绿 花 艳 ,盛夏 幽 湖 浴 山 ,金秋 尽 染 山林 ,隆冬 冰 塑 自然 。 
09 以 浴 湖 释 瀑 、 彩 林 、 雪 峰 、 藏 情 、 蓝 冰 这 “六 绝 ” 著 称 于 世 。 九 寨 沟 集 原始 美 .自然美 .野趣 
10 美 于 一 体 ,具有 极 高 的 游览 观赏 价值 和 科普 价值 ,被 誉 为 人间 人 仙境“ 童话 世界 ”。 九 寨 沟 
11 作为 一 个 世界 罕见 的 地 质地 貌 带 和 生物 多 样 性 地 区 ,具有 无 可 替代 的 生态 意义 和 科学 研 





12 究 价值 。 
13 </p> 
14 </div> 
表 3-12 实现 图 片 通栏 布局 效果 的 样式 定义 代码 
行 号 CSS 代码 行 号 CSS 代码 
01 .main { 16 .main h2 { 
02 width: 430px; 17 line- height: 180%; 
03 pagdding: 5px; 18 text- align: center; 
04 border: 2px solid #c000; 19 padding: Opx; 
05 overflow: hidden; 20 margin: Opx; 
06 |} 21 | } 
07 -main img { 22 
08 width: 140px; 23 | .mainp{ 
09 height: 65px; 24 font- size: 12px; 
10 float: left; line- height: 1.8em; 
11 clear: both; 26 text- indent: 2em; 
12 padding: 4px; 27 margin: Opx; 
13 margin- right: 10px; 28 padding: Opx; 
14 border: #ccc lpx solid; 29 } 
15 } 














从 表 3-12 中 的 CSS 代码 可 以 看 出 ,使 用 float 和 clear 属性 ,将 一 组 图 片 垂 直 排 列 ,这 
里 定义 所 有 的 图 片 都 左 浮动 ,并 定义 clear 属性 为 both ,清除 相 邻 图 片 并 列 浮动 ,保证 它 
们 纵向 显示 。 通 过 定义 左 侧 图 片 左 浮动 , 右 侧 文本 保持 默认 的 流动 布局 ,这 样 保证 页 面 中 
的 文本 围绕 图 片 的 右 侧 显示 。 如 果 让 页 面 中 的 文本 围绕 图 片 的 左 侧 显 示 , 则 只 需要 修改 
img 的 float 属性 值 为 right, 同 时 设置 margin-left 的 属性 值 为 10px 即 可 。 

图 3-25 所 示 的 布局 形式 是 一 种 典型 的 浮动 与 流动 混合 应 用 , 左 侧 是 浮动 布局 , 右 侧 
是 流动 布局 ,调整 左 侧 的 浮动 元 素 与 右 侧 的 流动 元 素 之 间 间 距 可 以 通过 设置 左 侧 浮动 元 
素 的 右边 界 或 右 填充 来 实现 。 但 是 设置 右 侧 浮动 元 素 的 左边 界 或 左 填充 效果 不 明显 ,这 
是 由 于 右 侧 浮动 元 素 的 左边 界 或 左 填充 被 左 侧 的 图 片 覆 盖 所 致 ,此 时 右 侧 浮动 元 素 的 左 
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a 九寨 沟 位 于 四 川江 西北 部 岷 山 山 防 南 段 的 阿坝 


藏族 羌族 自治 州 九 寨 沟 县 章 扎 镇 填 内 ， 因 沟 内 有 树 
正 、 荷 叶 、 则 查 尘 等 九 个 屯 族 村 寨 而 得 名 。 九寨沟 


年 均 气温 为 6~ 14 忆 , 冬 无 严 寨 , 夏季 京 吏 , 四 季 景色 


各 异 : 仲春 树 绿 花 相 ， 压 夏 曲 湖 胖 山 ， 全 秋 尽 染 山 


林 ， 隆冬 冰 闻 自然 。 以 开 戎 、 要 湿 、 彩 林 、 雪 活 、 
苞 情 、 共 水 这 “六 绝 ” 著称 于 世 。 九 寨 沟 集 原 凤 
美 、 自然 美 、 时 加美 于 一 体 ， 具有 可 六 澳 观 芝 
价值 和 科普 价 信 ， 补 内 为 “人 间 仙 清 ”“ 童 话 世 


界 ”。 九 赛 沟 作为 一 个 世界 罕见 的 地 质地 罗 带 和 生物 多 样 性 地 区 ， 有 具有 无 可 莹 代 
的 生态 意义 和 科学 研究 价值 。 


图 3-25 图 片 通栏 布局 的 浏览 效果 





边界 或 左 填充 要 大 于 左 侧 图 片 的 宽度 才能 显示 间距 效果 ,不 过 这 样 做 不 可 取 , 还 是 通过 定 


义 左 侧 浮动 元 素 的 右边 界 或 右 填 充实 现 调 控 两 者 之 间 的 间距 更 方便 。 


3. 全 图 排版 网 页 的 制作 


对 于 一 些 素 材 库 或 相册 类 的 网 站 ,往往 有 大 量 的 图 像 需 要 在 同一 个 页 面 中 显示 ,使 用 
CSS 可 以 制作 全 图 网 页 ,并 可 以 精确 地 控制 这 些 图像 的 位 置 ,同时 ,也 便于 随时 修改 CSS 


样式 。 


表 3-13 所 示 的 HTML 代码 可 以 实现 全 图 排版 效果 ,相关 样式 定义 的 CSS 代码 如 
表 3-14 所 示 ,其 浏览 效果 如 图 3-26 所 示 。 


行 号 


表 3-13 全 图 排版 网 页 的 HTML 代码 
HTML 代码 





01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 





<div id= "main"> 


<ul> 


<1i>< img src="images/t01.jpg" alt=" 图 片 1"/></1i> 
<1i>< img src="images/t02.jpg" alt=" 图 片 2"/></1i> 
<1i>< img src="images/t03.jpg" alt=" 图 片 3"/></1i> 
<1i>< img src="images/t04.jpg" alt=" 图 片 4"/></1i> 
<1i><img src="images/t05.jpg" alt=" 图 片 5"/></1i> 
<1i><img src= "images/t06.jpg" alt=" 图 片 6"/></1i> 
<1i>< img src="images/t07.jpg" alt=" 图 片 7"/></1i> 
片 8"/></1i> 
片 9"/></1i> 
片 10"/></1i> 
片 11"/></1i> 
<1i><img src= "images/t12.jpg" alt=" 图 片 12"/></1i> 





<1i>< img src="images/t08.jpg" alt= 
<1i>< img src="images/t09.jpg" alt= 





<1i>< img src="images/t10.jpg" alt= 





<1i>< img src="images/tl11.jpg" alt= 


</ul> 


</div> 
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表 3-14 实现 全 图 排版 网 页 的 样式 定义 代码 





行 号 CSS 代码 行 号 CSS 代码 
01 Lt 08 list- style- type: none; 
02 margin: Opx; 09 |} 

03 padding: Opx; 10 img{ 

04 } 11 border: 2px solid #ccc; 
05 1if{ 12 height: 60px; 

06 padding: 4px; 13 width: 80px; 


07 float: left; 14 } 





图 3-26 全 图 排版 网 页 的 浏览 效果 


分 析 全 图 排版 网 页 的 HTML 代码 和 对 应 的 CSS 样式 代码 可 知 ,main 为 主 容器 ,每 
张 图 像 放 置 在 li 标签 内 ,通过 定义 li 标签 的 浮动 属性 来 实现 排版 。 定 义 项 目 列 表 ul 的 边 
界 属性 值 和 填充 属性 值 为 0。 定义 列表 项 li 的 填充 属性 ,控制 每 个 列表 项 的 间距 。 由 于 
每 个 图 像 的 原始 尺寸 可 能 不 完全 相同 ,所 以 统一 设置 图 像 的 尺寸 ,以 保证 各 个 图 像 在 页 面 
中 以 缩 略 图 的 方式 显示 ,另外 还 设置 了 图 像 的 边框 属性 。 由 于 主 容器 main 的 宽度 没有 限 
定 , 浏 览 全 图 网 页 时 ,调整 浏览 器 窗口 的 大 小 时 ,图 像 的 排列 位 置 也 会 同步 发 生变 化 。 


4.“ 图 片 替代 文本 ”效果 的 实现 


通常 将 网 站 的 Logo 制作 成 图 像 ,以 背景 图 像 方式 嵌入 网 页 中 ,这 
样 可 以 美化 文字 ,改善 页 面 效 果 。 但 是 图 像 不 便于 SEO 进行 搜索 ,为 此 
HTML 代码 中 在 嵌入 背景 图 像 的 同时 也 保留 对 应 的 文本 ,浏览 时 显示 
背景 图 像 , 隐 藏 对 应 的 文本 。 实 现 图 文 并 存 效 果 的 方法 有 多 种 ,这 里 主 
要 介绍 三 种 方法 。 

(1) 躲避 法 。 

(2) 隐藏 法 。 

(3) 覆盖 法 。 


5. 利用 CSS Sprites 原理 合成 图 片 


网 页 制作 时 经 常会 出 现 一 些 尺 寸 相 同 但 内 容 不 同 的 图 片 ,这 些 图 片 可 能 是 页 面 上 的 
图 标 、 栏 目标 题 或 者 导航 栏 背景 图 片 。 由 于 这 样 的 图 片 尺寸 往往 不 大 但 数目 较 多 ,如 果 这 
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些小 图 片 对 应 于 多 个 图 像 文件 ,用 户 浏 览 网 页 时 则 需要 调用 多 个 图 像 文 回 ; 
件 才 能 将 页 面 完整 显示 出 来 。 而 将 多 个 小 图 片 集成 于 同一 个 图 像 文件 ， 六 
利用 背景 图 像 的 定位 设置 显示 图 像 不 同 的 区 域 , 只 需要 调用 一 个 图 像 文 
件 即 可 ,这 样 可 以 有 效 地 解决 图 像 加 载 的 问题 。 

应 用 CSS 布局 网 页 时 ,装饰 性 图 片 被 分 离 到 CSS 文件 中 定义 ,通过 
CSS 背景 属性 的 background-image、 background-repeat 和 background-position 等 来 实 
现 。 将 多 个 类 似 的 小 图 片 集成 存储 于 一 个 图 像 文件 中 ,在 需要 引用 图 片 的 地 方 ,设置 合适 
的 background-position 即 可 。 可 以 在 垂直 方向 及 水 平方 向 双向 控制 ,也 可 以 设置 是 否 重 
复 。 但 要 注意 把 握 合适 的 “ 度 ”, 如 果 集 成 得 到 的 图 像 文 件 太 大 ,会 造成 下 载 时 间 较 长 , 反 
而 会 影响 网 页 的 浏览 速度 。 


6. 利用 CSS 样式 设置 图 像 的 阴影 效果 


图 像 的 阴影 是 由 很 多 颜色 不 断 渐变 的 像素 行 或 者 像素 列 有 序 地 排 在 一 起 ,其 中 最 里 
层 像 素 行 或 像素 列 颜 色 最 深 ,最 外 层 颜 色 最 浅 , 它 们 的 颜色 值 不 断 递减 。 利 用 CSS 样式 
设置 图 像 的 阴影 效果 时 只 需 设 置 多 行 或 多 列 颜色 递减 , 且 宽度 相同 并 有 规律 地 排列 在 一 
起 就 能 够 实现 。 

使 用 简单 的 错位 ,通过 相对 定位 方法 就 可 以 快速 制作 阴影 效果 。HTML 代码 如 下 所 
示 , 其 浏览 效果 如 图 3-27 所 示 。 

















<div class= "shadow"> 
<div class= "img in" ><img src="images/t01.jpg" alt="" />< /div> 
</div> 









一 图 像 的 阴影 效果 
图 3-27 采用 相对 定位 方法 设置 图 像 阴 影 的 浏览 效果 


采用 相对 定位 方法 设置 图 像 阴影 效果 的 CSS 代码 如 表 3-15 所 示 。 
表 3-15 采用 相对 定位 方法 设置 图 像 阴影 效果 的 CSS 代码 














序号 CSS 代码 序号 CSS 代码 
01 -Shadow { 05 -img in img{ 
02 width:300px7 06 width:294px; 
03 background:#ccc; 07 height:180px 
04 | 上 08 | } 
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续 表 
序号 CSS 代码 序号 CSS 代码 
09 .img in { 13 padding:2px7 
10 position:relative; 14 background:# fff; 
3 top:— 3px; 15 border:1px solid # 9997 


12 left:- 3px; 16 } 





【问题 探究 】 


【问题 1】 页 面 中 的 图 像 有 何 作用 ? 网 页 中 的 图 像 在 信息 传达 上 应 具备 哪些 功能 ? 

传递 信息 的 视觉 要 素 包括 版 式 文字、 图 像 色 彩 等 ,其 中 能 在 一 瞬间 让 人 了 人 解 访问 的 主 
页 是 否 与 印象 相同 的 就 是 图 像 ,而 又 以 直接 表现 标题 或 主页 信息 的 插图 和 照片 最 有 说 服 力 ， 
它 能 够 使 访问 者 直接 确认 信息 。 浏 览 网 页 时 ,通过 观看 图 片 ,就 能 了 解 网 页 的 主题 ,使 读者 
在 阅读 标题 和 正文 之 前 ,对 内 容 有 一 个 大 致 了 解 , 就 可 以 放心 地 深入 正文 之 中 了 。 

网 页 中 图 像 在 信息 传达 上 应 具备 以 下 功能 。 

(1) 要 有 良好 的 视觉 吸引 力 ,能 吸引 浏览 者 的 注意 力 ,通过 “阅读 最 省 力 原 则 ”来 吸引 
人 们 注意 网 站 。 

(2) 要 简洁 明确 地 传达 网 站 信息 ,能 使 人 们 一 目 了 然 地 抓 住 网 站 信息 的 重点 。 

(3) 要 有 强 而 有 力 的 诱导 作用 ,造成 鲜明 的 视觉 感受 效果 ,能 使 人 们 与 自己 的 问题 联 
系 起 来 ,从 观看 过 程 中 产生 愿望 和 和 欲求。 

【问题 2】 目前 ,因特网 上 支持 的 图 像 格式 主要 有 了 哪 几 种 类 型 ? 

目前 ,因特网 上 支持 的 图 像 格 式 主要 有 GIF(Graphics Interchange Format) 、JPEG 
(Joint Photographic Experts Group) .PNG(Portable Network Graphic) 三 种 。 其 中 GIF 
和 JPEG 两 格式 的 图 片 文件 由 于 文件 较 小 .适合 于 网 络 上 的 传输 ,而且 能 够 被 大 多 数 的 浏 
览 器 完全 支持 ,所 以 是 网 页 制作 中 最 为 常用 的 文本 格式 。 

GIF 图 像 文件 的 特点 是 : 最 多 只 能 包含 256 种 颜色 .支持 透明 的 前 景色 .支持 动画 格 
式 。GIF 格式 特定 的 存储 方式 使 得 GIF 文件 特别 擅长 于 表现 那些 包含 大 面积 单 色 区 的 
图 像 ,以 及 所 含 颜色 不 多 、 变 化 不 繁杂 的 图 像 ,例如 徽标 .文字 图 片 .卡通 形象 等 。 

JPEG 图 像 采 用 的 是 一 种 有 损 的 压缩 算法 ,支持 24 位 真 彩色 ,支持 渐进 显示 效果 , 即 
在 网 络 传输 速度 较 慢 时 ,一 张 图 像 可 以 由 模糊 到 清晰 慢 慢 地 显示 出 来 ,但 不 支持 透明 的 背 
景色 ,适用 于 表现 色彩 丰富 ,物体 形状 结构 复杂 的 图 像 , 例 如 照片 等 。 

【问题 3】 设计 网 页 时 ,应 对 网 页 中 的 图 像 进行 合理 搭配 ,对 图 像 的 处 理 主要 包括 哪 
些 方面 ? 

好 的 图 像 可 以 使 页 面 增色 ,但 不 当 的 图 像 则 会 带 来 不 良 效果 。 网 页 中 图 像 不 是 孤立 
的 ,要 与 页 面 统 一 ,对 图 像 的 处 理 主要 包括 以 下 几 个 方面 。 

1) 图 像 的 外 形 处 理 
图 像 的 外 形 能 使 网 页 的 气氛 发 生变 化 ,并 直接 影响 网 页 访问 者 的 兴趣 。 一 般 而 言 , 方 
形 的 图 像 显得 稳定 而 严肃 ; 三 角形 的 图 像 显得 锐利 ; 圆 形 或 曲线 外 形 的 图 像 显 得 柔软 亲 
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切 ;一 些 不 规则 或 不 带 边 框 的 图 像 显 得 活泼 。 

2) 图 像 的 面积 处 理 

图 像 在 网 页 中 占据 的 面积 大 小 能 直接 显示 其 重要 程序 。 一 般 地 ,大 图 像 容易 在 网 页 
中 形成 视觉 焦点 且 感 染 力 强 ,传达 的 情感 较为 强烈 ;小 图 像 常 用 来 穿插 在 文本 群 中 ,显得 
简洁 而 精致 ,有 点 级 和 呼应 网 页 主题 的 作用 。 

3) 图 像 的 数量 处 理 

图 像 的 数量 是 根据 网 页 中 内 容 灵 活 确定 的 。 如 果 网 页 中 只 使 用 了 一 幅 图 像 , 则 会 使 
网 页 的 内 容 显得 突出 且 安定 。 如 果 再 增加 一 幅 图 像 , 则 网 页 会 因为 有 了 对 比 和 呼应 而 活 
跃 起 来 。 

4) 图 像 的 背景 处 理 

网 页 图 像 与 背景 是 对 比 和 统一 的 关系 ,也 就 是 说 ,图 像 与 背景 在 和 谐 统 一 的 基础 上 ， 
应 有 一 定 的 对 比 ,以 使 主要 图 像 更 加 突出 。 

【问题 4】 网 页 中 使 用 图 像 应 注意 哪些 事项 ? 


网 页 中 使 用 图 像 应 注意 以 下 几 点 。 
(1) 网 站 的 首页 中 最 好 有 醒目 的 标题 文字 、Logo 标志 主题 图 像 等 , 令 人 过 目 不 忘 应 
是 制作 网 页 永远 的 目标 。 


(2) 网 页 中 的 图 像 最 好 有 一 定 的 实际 作用 ,尽量 减少 只 有 装饰 作用 的 图 像 在 页 面 中 
所 占 比例 ,以 便 突出 页 面 主题 。 

(3) 页 面 中 的 图 像 要 力求 清晰 可 见 、 意 义 简洁 。 对 于 图 形 内 包含 文字 ,应 注意 不 要 因 
压缩 而 导致 无 法 识别 。 

(4) 图 像 设计 时 不 要 过 多 使 用 泻 染 \、 渐 变 层 、 光 影 等 特殊 效果 的 图 像 ,这 样 会 使 图 像 
容量 变 大 。 设 计时 应 该 多 替 浏览 者 考虑 ,尽量 采用 压缩 设计 。 

(5) 为 了 节省 传输 时 间 , 许 多 浏览 者 会 采用 “不 显示 图 像 ” 的 模式 浏览 网 页 ,所 以 在 放 
置 图 像 时 ,一定 要 为 每 个 图 像 加 上 不 显示 时 的 “替代 文字 ”, 当 页 面 中 没有 显示 图 像 时 , 浏 
览 者 也 能 看 到 该 图 像 想 表达 的 内 容 。 

【问题 S】 在 Dreamweaver CC 的 【代码 视图 ] 窗 口中 如 何 使 用 [编码] 工具 栏 实现 所 
需 的 功能 ? 

代码 视图 会 以 不 同 的 颜色 显示 HTML 源 代码 ,以 帮助 用 户 区 分 各 种 标签 ,同时 用 户 
也 可 以 自己 指定 标签 或 代码 的 显示 颜色 。Dreamweaver CC 中 的 【编码 】 工 具 栏 位 于 【 代 
码 视图 窗口 的 左 侧 ,鼠标 光标 停 在 工具 栏 位 置 , 单 击 右键 弹出 快捷 菜单 ,在 该 快捷 菜单 中 
通过 单 击 【 编 码 ] 菜 单 ,可 以 显示 或 隐藏 [编码 ] 工 具 栏 。 

利用 [编码 3 工具 栏 可 以 实现 以 下 操作 。 

(1) 缩 进 与 凸 出 代码 。 

(2) 选择 父 标签 。 

(3) 注释 代码 。 

(4) 环绕 标签 。 

(5) 显示 /隐藏 行 号 。 
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(三 ) 简 答 题 
提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 





单元 4 网 页 中 列表 与 表格 的 
应 用 设计 


列表 标签 能 够 实现 网 页 结构 化 列表 ,对 于 需要 排列 显示 的 标题 列表 、 导 航 菜单 、 新 
闻 信 息 等 ,使 用 列表 标签 有 明显 的 优势 。 列 表 在 网 页 布局 和 排版 方面 也 有 强大 的 功 
能 ,由 于 列表 比较 整齐 美观 ,方便 浏览 ,是 常用 的 元 素 。 由 于 CSS 定义 了 强大 的 列表 属 
性 ,各 种 浏览 器 对 CSS 列表 属性 都 支持 ,使 用 列表 配合 div 标签 可 以 实现 更 多 的 网 页 
布局 。 

列表 标签 ul、ol\li、dl、dt 和 dd 都 是 块 状元 素 ,一 般 习惯 于 配对 使 用 ,ul 和 上 结合 定义 
无 序列 表 ,ol 和 li 结合 定义 有 序列 表 ,dl、dt 和 dd 结合 实现 定义 列表 ,1i 标签 显示 为 列表 
项 , 即 display 属性 设置 为 list-item, 每 个 列表 项 占据 一 行 ,这 种 样式 也 是 块 状元 素 的 一 种 

表格 在 显示 数据 方面 非常 灵活 ,设计 网 页 时 应 充分 发 挥 表 格 的 数据 组 织 功 能 。 表 格 
与 定义 列表 一 样 ,一 般 由 三 个 标签 配合 使 用 ,表格 由 table 标签 来 定义 , 行 由 tr 标签 来 定 
义 , 每 行 中 的 单元 格 由 td 标签 来 定义 ,td 标签 必须 包含 在 tr 标签 内 。 数 据 存放 在 单元 格 
中 , 即 过 td 过/td 二 标签 内 。 一 个 数据 单元 格 中 可 以 包含 文本 、 图 像 、 列 表 、 段 落 、 表 单 、 
表格 等 网 页 元 素 。 


【知识 尾 备 】 


1. HTMLS 的 列表 标签 
HTML5 的 列表 标签 如 表 4-1 所 示 。 
表 4-1 HTMLS 的 列表 标签 


























标签 名 称 标签 描述 标签 名 称 标签 描述 
<u> 定义 无 序列 表 <dd> 定义 列表 中 项 目的 描述 
<ol> 定义 有 序列 表 <menu> 定义 命令 的 菜单 /列表 
义 用 户 可 以 出 
<i> 定义 列表 的 项 目 ne pe 类 志江 员 
<dl> 定义 列表 < 于 command> | 定义 命令 按钮 
<dt> 定义 列表 中 的 项 目 
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1) 二 ul 二 ,二 ol 二 和 二 1 访 标签 

二 ul 二 标签 用 于 定义 无 序列 表 , 二 ol 二 标签 用 于 定义 有 序列 表 , 二 1 二 标签 用 于 定义 
列表 项 目 。 二 1i 汪 标签 可 用 在 有 序列 表 ( 二 ol>) 和 无 序列 表 ( 二 ul 二 ) 中 。ul 是 unordered 
list( 无 序列 表 ) 的 缩写 ,表示 项 目 列表 ;ol 是 order list( 有 序列 表 ) 的 缩写 ,表示 有 顺序 的 列 
表 ;li 是 item in a list( 列 表 项 ) 的 缩写 ,表示 列表 项 。 

(1) 项 目 列表 。 项 目 列表 以 项 目 符号 开头 ,在 列表 项 之 间 没 有 先后 次 序 时 使 用 ,所 
以 又 称 为 无 序列 表 。 项 目 列表 的 列表 项 使 用 圆 点 .圆圈 等 符号 表示 ,项 目 列表 用 ul 标 
签 表示 ,每 个 列表 项 用 1i 标 签 表示 ,一 般 网 页 中 都 使 用 项 目 列表 。 项 目 列表 的 示例 代码 
如 下 : 


<ul> 

<1i> 九 寨 沟 </1i> 
<1i> 黄 龙 < /1i> 
<1i> 四 姑娘 山 < /1i> 
<1i> 花 湖 </1i> 

</ul> 

项 目 列表 ul 的 浏览 效果 如 图 4-1 所 示 。 

(2) 有 序列 表 。 有 序列 表 的 列表 项 使 用 1、2、3 或 a、b、c 等 表示 顺序 ,有 序列 表 用 ol 
标签 表示 ,每 个 列表 项 用 1i 标签 表示 。 有 序列 表 一 般 用 于 描述 工作 进度 .作息 时 间 .大纲 
目录 等 。 有 序列 表 的 示例 代码 如 下 : 

<ol> 

<1i> 九 寨 沟 </1i> 
<1i> 黄 龙 < /1i> 
<1i> 四 姑娘 山 < /1i> 
<1i> 花 湖 < /1i> 


</ol> 


有 序列 表 ol 的 浏览 效果 如 图 4-2 所 示 。 





4-1 项 目 列表 ul 的 浏览 效果 4-2 有 序列 表 ol 的 浏览 效果 


2) 一 dl <<dt 过 和 二 dd> 标 签 

二 dl 二 标签 用 于 设置 定义 列表 (definition list) ,二 dd 记 在 定义 列表 中 用 于 定义 条 目 
的 定义 部 分 ,二 dt 二 标签 定义 了 定义 列表 中 的 项 目 ( 即 术语 部 分 )。 二 dl 二 标签 用 于 结 
合 二 dt 二 (定义 列表 中 的 项 目 ) 和 二 dd 二 (描述 列表 中 的 项 目 )。dl 是 definition list( 定 义 
列表 ) 的 缩写 ,表示 自 定义 列表 ,dl 最 早 是 为 了 描述 术语 解释 而 定义 的 标签 ,术语 的 名 
称 顶 格 显示 ,术语 的 解释 缩 进 显示 ,这 样 多 个 术语 列表 时 ,显得 井然 有 序 ,dl 后 来 被 拓 
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展 应 用 到 页 面 的 布局 中 ;dt 是 definition term( 定 义 术 语 ) 的 缩写 ,表示 定义 列表 的 标题 ; 
dd 是 definition in a definition list( 定 义 列表 中 的 定义 ) 的 缩写 ,表示 对 术语 的 解释 , 即 定 
义 列表 项 。 

定义 列表 dl 是 一 种 与 项 目 列表 ul 和 有 序列 表 ol 有 区 别 的 列表 形式 ,定义 列表 的 列 
表 项 可 以 带 文 本 、 图 片 和 其 他 多 媒体 页 面 元 素 。 定 义 列表 dl 可 以 更 好 地 表现 术语 、 索 引 
等 内 容 , 可 以 更 好 地 对 所 表示 的 内 容 进 行 描述 。 定 义 列表 由 三 个 HTML 标签 组 织 ,分 别 
是 dl、dt 和 dd, 其 中 dt 用 于 标识 组 成 定义 列表 的 术语 名 称 或 标题 部 分 ,其 后 跟随 dd 标 
得 ,dd 用 来 标识 对 它 的 定义 、 解 释 或 内 容 索 引 等 。 

定义 列表 dl 的 示例 代码 如 下 : 


<dl> 
<dt> 推 荐 旅游 景点 < /dt> 
<qdd> 九 寨 沟 < /dd> 
<dd> 黄 龙 < /dd> 
<dd> 四 姑娘 山 < /dd> i 
oa Ee 
</dl> 花 湖 
定义 列表 dl 的 浏览 效果 如 图 4-3 所 示 。 图 4-3 定义 列表 dl 的 浏览 效果 


3) 二 menu 二 标签 
去 menu> 标 签 用 于 定义 菜单 列表 。 当 和 希望 列 出 表单 控件 时 使 用 该 标签 。 注 意 与 nav 
的 区 别 ,menu 专门 用 于 表单 控件 。 示 例 代码 如 下 : 


<menu> 
<1i> <input type= "checkbox" />Red< /1i> 
<1i> <input type= "checkbox" />Blue< /1i> 
< /menu> 
4) 二 command 二 标签 
去 command 之 标签 用 于 定义 命令 按钮 ,例如 单 选 按钮 、 复 选 框 或 按钮 。 只 有 当 
二 command 记 标签 位 于 二 menu 二 标签 内 时 ,该 元 素 才 是 可 见 的 。 否则 不 会 显示 这 个 元 
素 , 但 是 可 以 用 它 规 定 键盘 快捷 键 。 示 例 代码 如 下 : 


<menu> 
< command onclick="alert ('Hello World')">Click Me!< /command> 


< /menu> 


2. CSS 列表 属性 (List) 


CSS 列表 属性 允许 放置 改变 列表 项 标志 ,或 者 将 图 像 作为 列表 项 标志 。 
CSS 列表 属性 包括 列表 类 型 .列表 符号 图 像 和 位 置 。CSS 列表 属性 的 定义 示例 代码 
如 下 : 
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list- style- type:circle; 
list- style- image:url (images/0201icon04.gif); 
list- style- position:outside; 
} 
1) list-style-type 属性 
list-style-type 属性 用 于 定义 列表 符号 样式 ,默认 为 实心 圆 点 disc。 当 list-style- 
image 属性 已 定义 为 有 效 值 时 ,list-style-type 属性 则 无 效 。list-style-type 属性 的 取 值 有 
以 下 类 型 :disc (实心 圆 点 )、circle (圆圈 )、square (实心 方块 )、decimal( 阿 拉 伯 数字 )、 
lower-roman( 小 写 罗马 数字 )、upper-roman (大写 罗马 数字 )、lower-alpha (小 写字 母 )、 
upper-alpha( 大 写字 母 ) .none( 不 使 用 项 目 符号 ) 。 
在 一 个 无 序列 表 中 ,列表 项 的 标志 (marker) 是 出 现在 各 列表 项 旁边 的 圆 点 。 在 有 序 
列表 中 ,标志 可 能 是 字母 .数字 或 另外 某 种 计数 体系 中 的 一 个 符号 。 要 修改 用 于 列表 项 的 
标志 类 型 ,可 以 使 用 属性 list-style-type, 示 例 代码 如 下 : 


ul {list- style- type : square} 


上 面 的 代码 把 无 序列 表 中 的 列表 项 标志 设置 为 方块 。 

2) list-style-image 属性 

有 时 ,常规 的 标志 是 不 够 的 ,可 能 想 对 各 标志 使 用 一 个 图 像 ,这 可 以 利用 list-style- 
image 属性 做 到 ,只 需要 简单 地 使 用 一 个 url() 值 ,就 可 以 使 用 图 像 作为 标志 。list-style- 
image 属性 用 于 定义 列表 项 符号 的 图 像 ,默认 情况 下 不 指定 列表 项 符号 的 图 像 。list- 
style-image 属性 的 取 值 有 none( 不 指定 图 像 ) 和 url( 指 定 图 像 地 址 ) 。 示 例 代码 如 下 


ul 1i {list- style- image : url (01.gif)} 


3) list-style-position 属性 

CSS 可 以 确定 标志 出 现在 列表 项 内 容 之 外 还 是 内 容 内 部 ,这 是 利用 list-style- 
position 属性 完成 的 。 该 属性 用 于 定义 列表 项 符号 的 显示 位 置 ,默认 为 outside (外 )。 
list-style-position 属性 的 取 值 有 outside (列表 项 符号 或 图 像 位 于 文本 以 外 ) 和 inside( 列 
表 项 符号 或 图 像 位 于 文本 以 内 ) 。 

4) list-style 属性 

为 简单 起 见 , 可 以 将 以 上 3 个 列表 样式 属性 合并 为 一 个 方便 的 属性 : list-style。 示 例 
代码 如 下 : 


1i {list- style : url (example.gif) square insidqe} 


list-style 的 值 可 以 按 任何 顺序 列 出 ,而 且 这 些 值 都 可 以 忽略 。 只 要 提供 了 一 个 值 ,其 
他 的 就 会 填 人 其 默认 值 。 

list-style 属性 可 以 综合 设置 列表 项 符号 样式 .图 像 和 位 置 , 当 1liststyle-type 属性 和 
list-style-image 属性 同时 被 设置 了 ,list-style-image 属性 设置 的 列表 项 图 像 优 先 。 

各 种 浏览 器 都 为 列表 标签 预定 义 了 默认 样式 ,如 果 要 定义 个 性 化 的 列表 样式 , 则 应 清 
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除 列表 样式 的 默认 值 。 清 除 列表 样式 默认 值 的 示例 代码 如 下 : 


ut{ 
margin: Opx; /* 清除 非 焉 浏览 器 中 的 默认 值 * / 
padding: Opx; /* 清除 下 浏览 器 中 的 默认 值 * / 
list- style- type: none; /* 清除 列表 项 的 默认 列表 符号 * / 
} 
ulif 
margin: Opx; 
padding: Opx; 


list- style- type: none; 
} 


3. 表格 元 素 及 标签 


HTML5 的 表格 标签 如 表 4-2 所 示 。 
表 4-2 HTML5 的 表格 标签 





























标签 名 称 标签 描述 标签 名 称 标签 描述 
<table> 定义 表格 <thead> 定义 表格 中 的 表 头 内 容 
<caption> 定义 表格 标题 <tbody> 定义 表格 中 的 主体 内 容 
<th> 定义 表格 中 的 表 头 单元 格 <tfoot> 定义 表格 中 的 表 注 内 容 ( 脚 注 ) 
一 tr> 定义 表格 中 的 行 < 一 col> ee 
<td> 定义 表格 中 的 单元 去 colgroup> | 定义 表格 中 供 格式 化 的 列表 
table tr 和 td 标签 被 用 来 实现 表格 化 数据 显示 ,它们 有 着 明确 的 语义 ,各 个 标签 的 语 
义 如 下 。 
1) table 
table 标签 主要 用 来 定义 数据 表格 的 整体 样式 ,数据 表 中 的 数据 显示 通过 td 标签 来 
实现 。 
2) tr 


tr 是 a row in a table 的 缩写 ,表示 表格 中 的 一 行 ,其 内 部 还 需要 包含 单元 格 td。 

3) td 

td 是 a diamonds in a table 的 缩写 ,表示 表格 中 的 一 个 单元 格 ,td 标签 是 表格 中 最 小 
的 容器 元 素 。 

table tr 和 td 都 是 块 状元 素 ,table 显示 为 表格 , 即 display 属性 值 为 table;tr 显示 为 
表格 行 , 即 display 属性 值 为 table-row;td 显示 为 单元 格 , 即 display 属性 值 为 table-cell。 

4) th 

th 用 于 定义 表格 的 标题 ,具有 预定 义 格式 ,可 以 使 单元 格 内 的 数据 居中 并 加 粗 显 示 。 

5) caption 

caption 标签 用 于 定义 表格 的 标题 ,对 表格 进行 简单 的 描述 ,该 元 素 是 内 联 元 素 , 其 他 
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表格 元 素 是 块 状元 素 。 
4. CSS 表格 属性 (Table) 


设置 CSS 表格 属性 可 以 改善 表格 的 外 观 。 

1) 表格 边框 属性 (border) 

表格 及 单元 格 边 框 的 默认 宽度 为 2px, 使 用 border 属性 可 以 灵活 设置 表格 及 单元 格 
的 边框 样式 。 如 果 为 table 标签 设置 边框 , 则 只 会 影响 整个 表格 的 四 周边 框 ,而 不 会 影响 
到 单元 格 。 如 果 为 单元 格 td 标签 设置 边框 , 则 会 影响 所 有 单元 格 的 边框 。 

如 果 将 border-width 属性 设置 1px 就 可 以 显示 细 线 框 ,设置 较 大 (例如 5px) 就 可 以 
显示 粗 线 框 ; 如 果 将 border-style 属性 设置 为 dashed 就 可 显示 虚线 框 , 设 置 为 double 就 
可 显示 为 双 线 框 ; 如 果 只 设置 border-bottom 属性 的 值 , 则 会 显示 单线 框 。 

以 下 示例 代码 为 table .th 以 及 td 设置 了 蓝 色 边 框 。 


table, th, td {border: lpx solid blue;} 


2) 表格 边框 折 芭 属性 (border-collapse) 

border-collapse 属性 用 于 定义 表格 的 边框 和 单元 格 的 边框 是 重合 还 是 分 离 。 其 取 值 包 
括 separate( 边 框 分 离 , 即 表格 具有 双 线 条 边框 ) 和 collapse( 边 框 重 合 , 即 表格 边框 折 笃 为 单 
一 边框 ), 默认 值 为 separate。 当 border-collapse 属性 值 为 separate 时 ,如 果 设 置 border- 
spacing 属性 的 值 设置 较 大 (例如 8px) ,就 可 以 显示 为 宫 字 形 表格 。 对 于 不 支持 border- 
spacing 属性 的 浏览 器 ,可 以 在 table 标签 内 设置 cellspacing 属性 值 来 定义 边框 的 宽度 。 

由 于 table ,th 以 及 td 元 素 都 有 独立 的 边框 。 如 果 需 要 把 表格 显示 为 单线 条 边框 , 则 
使 用 border-collapse 属性 。 示 例 代 码 如 下 : 


table {border- collapse:collapse;} 
table, th, td {border: lpx solid black;} 


3) 单元 格 间 距 属 性 (border-spacing) 

border-spacing 属性 用 于 指定 相 邻 单元 格 边框 之 间 的 距离 ,该 属性 值 用 于 设置 相 邻 
单元 格 之 间 的 距离 。 如 果 指 定 一 个 值 , 则 表示 相 邻 单元 格 水 平和 垂直 方向 的 间距 相同 ;如 
果 指 定 两 个 值 , 第 一 个 值 指 定 水 平方 向 间距 ,第 二 个 值 指 定 垂直 方向 间距 。border- 
spacing 的 取 值 不 能 为 负 值 ,也 不 能 为 百分比 。 

4) 单元 格 边框 显示 属性 (empty-cells) 

empty-cells 属性 定义 当 单元 格 无 内 容 时 ,是 否 显示 该 单元 格 的 边框 ,其 取 值 包括 
show( 显 示 空 单元 格 的 边框 和 背景 ) 和 hide( 隐 藏 空 单元 格 的 边框 和 背景 ), 默 认 值 为 
show。 

5) 表格 内 容 显示 方式 属性 (table-layout) 

table-layout 属性 控制 表格 内 容 的 显示 方式 ,其 取 值 包括 fixed( 浏 览 器 以 一 次 一 行 的 方 
式 显示 表格 内 容 ) 和 auto( 表 格 在 所 有 单元 格 的 内 容 都 读 取 之 后 才 显示 ) ,默认 值 为 auto。 

6) 表格 颜色 属性 (background-color) 

通过 行 或 列 的 background-color 属性 设置 背景 颜色 ,可 以 改善 数据 表格 的 视觉 效果 。 
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以 下 示例 代码 设置 边框 的 颜色 以 及 th 元 素 的 文本 和 背景 颜色 。 


table, td, th {border:lpx solid green;} 
th { 
background- color:green; 
color:white; 
} 
7) 表格 宽度 (width) 和 高 度 (height) 属 性 
通过 width 和 height 属性 可 以 设置 表格 的 宽度 和 高 度 。 
以 下 示例 代码 将 表格 宽度 设置 为 100% ,同时 将 th 元 素 的 高 度 设置 为 50px。 
table {width:100%;} 
th {height:50px;} 
8) 表格 文本 对 齐 属性 (text-align 和 vertical-align) 
text-align 和 vertical-align 属性 用 于 设置 表格 中 文本 的 对 齐 方式 。textralign 属性 用 
于 设置 水 平 对 齐 方式 ,例如 左 对 齐 、 右 对 齐 或 者 居中 ,示例 代码 如 下 : 


td {text-align:right;} 


vertical-align 属性 用 于 设置 垂直 对 齐 方式 ,例如 顶部 对 齐 、 底 部 对 齐 或 居中 对 齐 , 示 
例 代 码 如 下 : 


td { 

height:50px7 

Vertical- aliqn:bottom; 
} 


9) 表格 内 边 距 属性 (padding) 
如 需 控制 表格 中 内 容 与 边框 的 距离 , 则 为 td 和 th 元 素 设 置 padding 属性 ,示例 代码 
如 下 : 


td {padding:15px;} 


【引导 训练 】 


任务 4-1 创建 以 项 目 列表 形式 
表现 新 闻 标题 的 网 页 
【任务 榴 述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 
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(2) 创建 网 页 文档 0401. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0401. html 中 添加 必要 的 HTML 标签 和 输入 文字 。 

(4) 浏览 网 页 0401. html 的 效果 ,如 图 4-4 所 示 , 该 网 页 包含 以 项 目 列表 形 式 表 现 的 
新 闻 标 题 。 





相关 新 闻 报道 


。 阿坝 州 发 布 冬 春 旅游 产品 并 开通 阿坝 旅游 网 

。 四 川 阿坝 发 布 冬 春季 旅 游 产 品 并 开通 "阿坝 旅游 " 冬 游 美 丽 九寨 
。 阿坝 州 发 布 冬 春 旅游 产品 开通 "阿坝 旅游 网 " 

。 四川 阿坝 发 布 冬 春 旅游 产品 阿坝 旅游 网 正式 开通 





4-4 网 页 0401. html 的 浏览 效果 


【任务 吝 施 】 


1. 创建 所 需 的 文件 夹 和 复制 所 需 的 资源 


在 文件 夹 "HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit04, 然 后 在 该 文件 夹 
中 创建 子 文件 夹 0401, 再 在 该 子 文件 夹 0401 中 创建 css、images 等 子 文件 夹 , 且 将 所 需 的 
素材 复制 到 对 应 的 子 文件 夹 中 。 


2. 启动 Dreamweaver CC 
通过 Windows 的 [开始] 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 创建 本 地 站 点 与 网 页 


创建 1 个 名 称 为 “单元 4” 的 本 地 站 点 ,站 点 文件 夹 为 Unit04。 在 文件 夹 0401 中 创建 
网 页 文档 0401. html。 


4. 定义 网 页 主体 布局 结构 和 美化 列表 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 4-3 
所 示 。 


表 4-3 网 页 0401. html 中 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 | body, html,ul { 05 | body { 
02 padding: 0; 06 font- family: ' 微 软 雅 黑 '; 
03 margin: 0; 07 color: #47a3da; 
04 | 上 08 | } 





在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 4-4 
所 示 。 
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表 4-4 网 页 0401. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 | .content { 09 |#news con li{ 
02 margin: 10px auto; 10 borgder— bottam: lrx dashed #ccocccc; 
03 max- width: 1000px; 11 line- height: 30px; 
04 |} 12 height: 30px; 
05 |#news con { 13 list- style-position: inside; 
06 width: 50%; 14 |} 
07 float: left 
08 |} 














5. 在 网 页 文档 0401. html 中 链接 外 部 样式 表 


切换 到 网 页 文档 0401. html 的 [代码 3 视图 ,在 标签 “过 /head> ”的 前 面 输入 链接 外 部 
样式 表 的 代码 ,如 下 所 示 。 


<1ink type= "text/css" rel= "stylesheet" href= "css/base.css"/> 
<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 


6. 在 网 页 0401. html 中 插入 所 需 的 标签 和 输入 所 需 的 文字 内 容 


打开 网 页 0401. html 的 【代码 窗口 ,将 光标 置 于 一 body 二 一 /body 二 之 间 , 然 后 在 
【插入 ] 菜 单 中 选择 Div 选项 ,打开 [插入 Div] 对 话 框 ,在 [插入 】 列 表 框 中 选择 “在 插入 
点 ”, 在 Class 列表 框 中 选择 content, 如 图 4-5 所 示 。 





图 4-5 【插入 Div] 对 话 框 


单 击 【确定 ] 按 钮 ,在 网 页 中 插入 如 下 所 示 的 HTML 代码 。 
<div class= "content"> 此 处 显示 “class "content" 的 内 容 < /div> 


删除 文本 “此 处 显示 class "content” 的 内 容 ”, 然 后 将 光标 置 于 二 div class 一 
"content" 与 过 /div 志 之 间 , 在 [插入 3 菜单 中 依次 选择 [标题 ]~【 标 题 3] 命 令 , 如 图 4-6 
所 示 , 在 网 页 中 插入 标签 二 h3 二 /h3 二 。 

接着 将 光标 置 于 标签 二 h3 二 /h3 二 之 后 ,在 【插入 菜单 中 依次 选择 【项目 列表 】 选 
项 ,在 网 页 中 插入 标签 二 ul 过 /ul , 且 在 标签 二 ul 盖 内 输入 “id 一 "news_con"”。 接 着 将 
光标 置 于 二 ul 与 三 /ul 二 之 间 , 在 【插入 菜单 中 依次 选择 【列表 项 命令 ,在 网 页 中 插入 

107 


HTML5+ CSS3 跨 平 台 网 页 设计 实例 教程 











Div(D) 
Image Ca+Ak+1 
让 营 (P) 

标题 1(1) 
Table Ctrl+Al+T 标题 2(2) 
Figure 
项 目 列表 (U) 标题 4(4) 
编号 列表 (O) 标题 5(5) 
列表 项 (D 标题 6(6) 
Hyperlink(P) HGroup(G) 


图 4-6 在 下 拉 菜 单 中 选择 [标题 3】 


标签 二 li 这 过 /li 这 ,分 别 插入 5 个 二 li 全 二 /li 人 标签 ,网 页 中 插入 多 个 标签 的 HTML 代码 
如 下 : 





<div class= "content"> 
<h3>< /h3> 
<ul idq= "news_con"> 
<1i></li> 
<1li></li> 
<1li></li> 
<1li></li> 
<1li></li> 
</ul> 
</div> 





在 网 页 中 输入 文字 ,结果 如 下 : 





<div class= "content"> 
<h3> 相 关 新 闻 报 道 < /h3> 
<ul id= "news_con"> 
<1i> 阿 坝 州 发 布 冬 春 旅游 产品 并 开通 阿坝 旅游 网 < /1i> 
<1i> 四 川 阿坝 发 布 冬 春季 旅游 产品 并 开通 "阿坝 旅游 " 冬 游 美丽 九寨 < /1i> 
<1i> 阿 坝 州 发 布 冬 春 旅游 产品 开通 "阿坝 旅游 网 "< /1i> 
<1i> 四 川 阿坝 发 布 冬 春 旅 游 产 品 阿坝 旅游 网 正式 开通 < /1i> 
</ul> 
</div> 











7. 保存 与 浏览 网 页 
保存 网 页 0401. html, 浏 览 网 页 的 效果 ,如 图 4-4 所 示 。 


108 





单元 4 网 页 中 列表 与 表格 的 应 用 设计 


任务 4-2 创建 以 项 目 列表 形式 
表现 图 文 按 钮 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样 
式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 0402. html, 且 链接 外 部 样式 文 
件 base. css 和 main. css。 

(3) 在 网 页 0402. html 中 添加 必要 的 HTML 标 
签 和 输入 文字 。 

(4) 浏览 网 页 0402. html 的 效果 ,如 图 4-7 所 示 ， 
该 网 页 包含 以 项 目 列表 形式 表现 的 图 文 按钮 。 


【任务 实施 】 Om 


1. 创建 文件 夹 与 网 页 
4-7 网 页 0402. html 的 浏览 效果 


在 站 点 “单元 4” 中 创建 文件 夹 0402 ,在 该 文件 夹 
中 创建 子 文件 夹 CSS ,images。 在 文件 夹 0402 中 创建 网 页 文档 0402. html。 


2. 定义 网 页 主体 布局 结构 和 美化 列表 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 4-5 
所 示 。 























表 4-5 网 页 0402. html 中 样式 文件 base. ess 的 CSS 代码 定义 





序号 CSS 代码 
01 body { 
02 min- width: 1200px; 
03 line- height: 2em; 
04 margin: auto; 
05 Color: #333; 
06 background- image: Url (../images/travel- bg.png); 
07 background- position: left top; 
08 background- repeat: repeat— x; 
09 background- color: #FFF; 
10 } 
11 Ulli 
2 margin: 07 
车 padding: 07 
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续 表 

序号 CSS 代码 

14 border: none; 

15 } 

16 ulif{ 

17 list- style- type: none; 

18 list-— style- position: outside; 

19 text- indent: 0; 

20 } 





【CSS 设计 器 了 面板 中 body 标签 的 背景 属性 设置 如 图 4-8 所 示 。 
【CSS 设计 器 了 面板 中 ul 与 i 标签 的 属性 设置 如 图 4-9 所 示 。 





图 4-8 body 标签 的 背景 属性 设置 图 4-9 与 上 标签 的 属性 设置 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 4-6 
所 示 。 


表 4-6 网 页 0402. html 中 样式 文件 main. ess 的 CSS 代码 定义 





序 导 CSS 代码 
01 Section { 
02 width: 1200px; 
03 margin: auto; 
04 margin- top: 30px; 
05 } 
06 -actpList { 
07 float: left; 
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续 表 

序号 CSS 代码 

08 margin- left: — 5px; 

09 overflow: hidden; 

10 width: 320px; 

11 , 

12 .actpList 1i { 

13 margin- bottom: Spx; 

14 margin- left: Spx; 

15 background- color: rgba (225, 232,237, .7); 

16 width: 146px; 

17 float: left; 

18 font- family: "Microsoft YaHei"; 

19 font- size: 20px; 

20 } 

21 .actpList li:hover { 

22 background- color: rgba (250, 250, 250, .7); 

23 } 

24 .actpList liif{ 

25 margin: 34px 5px 35px 15px; 

2 } 

27 

28 .ico-travel { 

29 background- image: 

30 url(../images/travel- ico.png); 

31 background- repeat: no- repeat; 

32 width: 16px; 

33 height: 16px; 

34 line- height: 16px; 

35 overflow: hidden; 

36 display: inline- block; 

37 Vertical-align: middle; 

38 } 

39 .ico-actp- 01, .ico-actp- 02, 

40 .ico- actp- 03, .ico- actp- 04, 

41 .ico- actp- 05, .ico- actp- 06, 

42 .ico- actp- 07, .ico- actp-08 { 

43 width: 40px; 

44 height: 40px; 

45 } 

46 

47 .ico-actp-01 { 

48 background- position: -500px 07 

49 了 

50 

Sl .ico-actp- 02 { 

52 background- position: -550px 07 
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续 表 

序号 CSS 代码 

53 } 

54 

55 .ico-actp-03 { 

56 background- position: -600px 07 

sy 

58 

59 .ico-actp-04{ 

60 background- position: -650px 07 

61 } 

62 

63 .icor- actp-05 { 

64 background- position: - 500px - 50px; 

65 } 

66 

67 .ico-actp-06 { 

68 background- position: - 550px - 50px7 

69 } 

70 

71 .ico-actp-07{ 

72 background- position: - 600px - 50px; 

73 } 

74 .ico-actp-08 { 

75 background- position: - 650px - 50px7 

76 } 


3. 在 网 页 文档 0402. html 中 链接 外 部 样式 表 
切换 到 网 页 文档 0402. html 的 [代码 视图 】 ,在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 





样式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/base.css"/> 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 


4. 编写 网 页 主体 布局 结构 的 HTML 代码 


打开 网 页 0402. html 的 【代码 了 窗口 ,将 光标 置 于 过 body 之 和 所 /body 之 之 间 , 然 后 在 
【插入 菜单 中 选择 Section 菜单 项 ,如 图 4-10 所 示 。 打 开 [【 插 入 Section】 对 话 框 , 单 击 【 确 


定 】 按 钮 即 可 插 和 人 标签 二 section 二 二 /section 二 。 


然后 将 光标 置 于 标签 二 section 二 与 二 /section 二 之 间 ,在 【插入 了 葬 单 中 选择 【项 目 列 
表 】 命 令 ,插入 标签 二 ul 之 过 /ul> ,并 且 设 置 项 目 列 表 的 css 类 为 actpList。 网 页 0402. 


html 主体 布局 结构 的 HTML 代码 如 表 4-7 所 示 。 
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Div(D) 
Image Cerl+Alt+l 
段落 (P) 

标题 (E) > 
Table Ctrl+Ak+T 
Figure 

项 目 列表 (U) 

疙 号 列表 (O) 

列表 项 (L) 

Hyperlink(p) 

Header 

Navigation(N) 

Main 

Aside 

Article 

Section 


Footer 








图 4-10 在 [插入 菜单 中 选择 Section 菜单 项 


表 4-7 网 页 0402. html 主体 布局 结构 的 HTML 代码 





序号 HTML 代码 
01 <section> 
02 <ul class= "actpList"> 
03 <!-- 列 表 式 导航 按钮 --> 
04 </ul> 
05 </section> 





5. 在 网 页 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 


在 网 页 文档 0402. html 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 , 对 应 的 HTML 
代码 如 表 4-8 所 示 。 


表 4-8 网 页 0402. html 的 HTML 代码 





序号 HTML 代码 
01 < section> 
02 <ul class= "actpList"> 
03 <1li><i class= "ico-travel ico- actp- 01"> &nbsp;< /i> 概 况 </1i> 
04 <1i><i class= "ico-travel ico- actp- 02"> gnbsp;< /i> 景 区 </1i> 
05 <1li><i class="ico- travel ico- actp- 03"> gnbsp;< /i> 交 通 </1i> 
06 <1i><i class="ico- travel ico- actp- 04"> gnbsp;< /i> 住 宿 </1i> 
07 <1i><i class="ico- travel ico-actp- 05"> gnbsp;< /i> 特 产 </1i> 
08 <1i><i class="ico- travel ico-actp- 06"> gnbsp;< /i> 租 车 </1i> 
09 <1i><i class="ico- travel ico-actp- 07"> gnbsp;< /i> 地 图 < /1i> 
10 <1i><i class="ico- travel ico- actp- 08"> gnbsp;< /i> 行 程 </1i> 
11 </ul> 
12 < /section> 





113 





HTML5+ CSS3 跨 平台 网 页 设计 实例 教程 


6. 保存 与 浏览 网 页 
保存 网 页 文档 0402. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 4-7 所 示 。 


任务 4-3 创建 应 用 表格 存放 数据 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 
(2) 创建 网 页 文档 0403. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 0403. html 中 添加 必要 的 HTML 标签 .插入 表格 和 输入 文字 。 

(4) 网 页 0403. html 的 浏览 效果 如 图 4-11 所 示 ,该 网 页 包含 一 个 4 行 3 列 的 表格 。 


票 名 票面 价 票数 
全 价 套 票 ¥160.00 1 
单 门票 ¥80.00 2 
观光 车 票 ¥60.00 


图 4-11 网 页 0403. html 的 浏览 效果 


【任务 和 吝 施 】 


1. 创建 文件 夹 与 网 页 


在 站 点 “单元 4” 中 创建 文件 夹 0403, 在 该 文件 夹 中 创建 子 文件 夹 CSS、images。 在 文 
件 夹 0403 中 创建 网 页 文档 0403. html。 


2. 编写 网 页 主体 布局 结构 的 HTML 代码 
打开 网 页 0403. html 的 【代码 了 窗口 ,将 光标 置 于 过 body 二 二 /body 二 之 间 , 然 后 在 


【插入 ] 菜 单 中 选择 Section 菜单 项 ,打开 【插入 Section] 对 话 框 , 单 击 [ 确 定 ] 按 钮 即 可 插入 


标签 二 section 二 一 /section 二 ,然后 设置 标签 一 section 二 的 id 值 为 content, 代 码 如 下 : 


< section id="content">< /section > 


3. 通过 【表格 ] 对 话 框 插 入 4 行 3 列表 格 


将 光标 置 于 二 section id 王 "content" 二 与 二 /section 二 之 间 , 在 Dreamweaver CC 主 界 


面 中 ,选择 【插入 】>Table 命令 ,弹出 Table 对 话 框 。 
(1) 在 【表格 ] 对 话 框 的 “ 行 数 "文本 框 中 输入 4, 在 “ 列 数 "文本 框 中 输入 3。 
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(2) 在 “表格 宽度 ”文本 框 中 输入 40, 其 后 的 下 拉 列 表 框 中 选择 宽度 的 单位 为 “百分比 ”。 

提示 : 创建 表格 时 ,宽度 单位 既 可 以 是 像素 ,也 可 以 是 百分比 。 如 果 宽 度 单 位 是 像 
素 , 那 么 所 定义 的 表格 宽度 是 固定 的 ,也 就 是 一 个 绝对 数值 ,不 会 受 浏览 器 大 小 变化 的 影 
响 ; 如 果 宽 度 单 位 是 百分比 ,那么 所 定义 的 表格 宽度 是 一 个 相对 数值 , 按 浏览 器 窗口 宽度 
的 百分比 来 指定 表格 的 宽度 , 它 会 随 着 浏览 器 的 大 小 变化 而 进行 相应 地 改变 。 

(3) 在 “边框 粗细 ”文本 框 中 指定 表格 边框 的 宽度 ,默认 值 为 0, 单 位 为 “像素 ”。 如 果 
在 浏览 器 中 浏览 时 不 显示 表格 边框 ,将 “边框 粗细 ”设置 为 0。 这 里 为 了 便于 识别 表格 边 
框 ,暂时 设置 边框 宽度 为 1, 以 后 再 设置 为 0。 其 他 参数 保持 其 默认 值 不 变 。 

(4) 在 “单元 格 边 距 " 文 本 框 中 指定 单元 格 边 距 大 小 ,默认 值 为 5, 这 里 设置 为 1 。 

(5) 在 “单元 格 间距 ”文本 框 中 指定 单元 格 间距 大 小 ,默认 值 为 0, 这 里 保持 默认 值 
不 变 。 

(6) 在 “标题 "区 域 选 择 “ 顶 部 ”形式 的 标题 。 

【表格 对 话 框 设 置 完成 后 如 图 4-12 所 示 。 








4-12 【表格 ] 对 话 框 


(7) 设置 完成 后 在 [表格 对话 框 中 单 击 【确定 按钮 ,一 个 4 行 3 列 的 表格 便 插 入 网 
页 中 。 网 页 0403. html 中 所 插入 表格 的 初始 HTML 代码 如 表 4-9 所 示 。 


表 4-9 网 页 0403. html 中 所 插入 表格 的 初始 HTML 代码 
序号 HTML 代码 


01 <table width= "40% " border= "1"” cellspacing= "0" cellpadding= "1"> 
02 <tbody> 

03 <tr> 

04 <th scope= "col"> gnbsp;< /th> 

05 <th scope= "col"> gnbsp;< /th> 

06 <th scope= "col"> gnbsp;< /th> 

07 </tr> 
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续 表 

序号 HTML 代码 

08 <tr> 

09 <td> gnbsp;< /td> 

10 <td> gnbsp;< /td> 

11 <td> gnbsp;< /td> 

12 ft 

13 > 

14 <td> gnbsp;< /td> 

15 <td> gnbsp;< /td> 

16 <td> gnbsp;< /td> 

17 </tr> 

18 <tr> 

19 <td> gnbsp;< /td> 

20 <td> gnbsp;< /td> 

2 <td> gnbsp;< /td> 

4 </tr> 

23 < /tbody> 

24 </table> 





(8) 保存 网 页 0403. html 中 所 插入 的 表格 ,该 表格 的 浏览 效果 如 图 4-13 所 示 。 


图 4-13 网 页 0403. html 中 所 插入 表格 的 初始 浏览 效果 


4. 设置 网 页 0403. html 中 表格 的 属性 


(1) 选择 网 页 0403. html 中 所 插入 的 表格 。 
用 鼠标 指针 指向 表格 边框 线 , 当 鼠标 光标 变 为 地 形状 时 单 击 选 中 整个 表格 。 选 择 整 
个 表格 时 ,表格 的 [属性 了 面板 如 图 4-14 所 示 。 





4-14 表格 的 【属性 了 面板 


(2) 通过 表格 的 [属性 了 面板 设置 其 属性 。 
在 Border 文本 框 中 输入 0, 对 齐 方式 选择 * 居 中 对 齐 *。 表 格 的 属性 更 改 后 ,效果 如 
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4-15 所 示 。 





4-15 设置 4 行 3 列表 格 的 属性 


(3) 保存 网 页 中 表格 的 属性 设置 。 
5. 在 网 页 0403. html 的 表格 中 输入 所 需 的 文字 内 容 


在 网 页 0403. html 表格 的 单元 格 中 输入 所 需 的 文字 内 容 , 网 页 0403. html 中 完整 的 


HTML 代码 如 表 4-10 所 示 。 
表 4-10 网 页 0403. html 中 完整 的 HTML 代码 





序号 HTML 代码 
01 |< section id= "content"> 
02 <table width= "40% " border= "0" cellspacing="0" cellpadding= "lw align= "center" > 
03 <tbody> 
04 <tr> 
05 <th scope= "col"> 票 名 < /th> 
06 <th scope= "col"> 票 面 价 < /th> 
07 <th scope= "col"> 票 数 < /th> 
08 </tr> 
09 <tr> 
10 <td> 全 价 套 票 </td> 
11 <td> 圣 160.00< /td> 
12 <td class= "last"> 1< /td> 
13 < 让 区 
14 <tr> 
15 <td> 单 门票 < /td> 
16 <tqd> ¥ 80.00< /td> 
17 <td class="last">2< /td> 
18 </tr> 
19 <tr> 
20 <td> 观 光 车 票 </td> 
21 <td> ¥ 60.00< /td> 
22 <td class="last">3< /td> 
2 </tr> 
24 < /tbody> 
25 </table> 
26 |</section> 





6. 定义 网 页 主体 布局 结构 和 美化 列表 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 4-11 
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所 示 。 由 于 网 页 0403. html 中 的 表格 及 单元 格 都 采用 CSS 样式 进行 美化 与 控制 ,所 以 将 
网 页 0403. html 中 设置 表格 属性 的 部 分 代码 “width 二 "40%" border 二 "0" cellpadding 二 "1" 
align 王 "center" "删除 。 


表 4-11 网 页 0403. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 |#content { 14 |taf 
02 margin: 15px auto ; 15 padding: 8px 10px 8px; 
03 |} 16 text- align:center; 
04 |table { 17 border- top: 1px solid #ccc; 
05 overflow: hidden; 18 border- right: lpx solid #ccc; 
06 border: lpx solid #d3d3d3; :| 站 
07 background: # fefefe; 20 
08 width: 40%; 21 |th{ 
09 —moz- border- radius: 5px; 22 text- align: center; 
10 —webkit- border- radius: 5px7 23 padding: 10px 15px; 
11 border- radius: 5px7 24 background: #eB8eaeb; 
过 margin: 0 auto; 25 border- right: lpx solid #ccc; 
到 :| 26 |} 














【CSS 设计 器 了 面板 中 td 标签 的 边框 属性 设置 如 图 4-16 所 示 。 





图 4-16 【CSS 设计 器 了 面板 中 td 标签 的 边框 属性 设置 
说 明 : 由 于 CSS 样式 代码 中 将 表格 的 外 边框 线 设 置 为 “1px solid 井 d3d3d3”, 所 以 表 
格 的 单元 格 只 需 设置 “上 ”和 “ 右 ” 边 框 线 , 标 题 行 单元 格 则 只 需 设置 “ 右 ” 边 框 线 。 另 外 , 表 
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格 的 边框 线 设置 圆 弧 半 径 为 5px, 标 题 行 单元 格 还 设置 背景 颜色 为 井 e8eaeb。 
7. 在 网 页 文档 0403. html 中 链接 外 部 样式 表 


切换 到 网 页 文档 0403. html 的 【代码 视图 】 ,在 标签 二 /head 二 的 前 面 输入 链接 外 部 样 
式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href="css/main.css"/> 


8. 保存 与 浏览 网 页 0403. html 
保存 网 页 文档 0403. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 4-11 所 示 。 


任务 4-4 创建 包含 个 性 化 表格 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0404. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0404. html 中 添加 必要 的 HTML 标签 .插入 表格 和 输入 文字 。 

(4) 浏览 网 页 0404. html 的 效果 ,如 图 4-17 所 示 ,该 网 页 包含 个 性 化 的 表格 。 


票 类 票 名 票 种 票面 价 网 上 价 票数 
套 票 。 全 价 套 票 成 人 票 ¥160.00 ¥160.00 1 
套 票 。 优 囊 套 票 优惠 村 羊 120.00 羊 120.00 2 
门票 “从 ] 标 成 人 票 ¥80.00 ¥80.00 3 
门票 。 单 优惠 门票 优惠 要 ¥40.00 ¥40.00 4 
门票 “儿童 免票 优惠 村 ¥0.00 ¥0.00 5 


图 4-17 网 页 0404. html 的 浏览 效果 


【任务 实施 】 
1. 创建 站 点 与 文件 夹 
在 站 点 “单元 4 中 创建 文件 夹 0404, 在 该 文件 夹 中 创建 子 文件 夹 CSS。 
2. 定义 网 页 主体 布局 结构 和 美化 表格 的 CSS 代码 
在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 主体 


119 


HTML5+ CSS3 跨 平 台 网 页 设计 实例 教程 





布局 结构 和 美化 表格 的 CSS 代码 如 表 4-12 所 示 。 
表 4-12 ”样式 文件 main. css 中 网 页 主体 布局 结构 和 美化 表格 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 |section { 36 | .box-table th.work { 
02 margin- top: 10px; 37 background- color: #e3ffcd 
03 |} 38 |} 
04 39 
05 |.box-table { 40 | .box- table tr.odd td { 
06 margin: auto; 41 background- color: #fafafa; 
07 pagdding: 07 2 |} 
08 font- size: 12px; 43 
09 font— weight: bold; 44 | .box- table tr.odd td.work, 
10 Color: #333; 45 | .box- table td.work { 
入 line- height: 22px; 46 background- color: #f£7fff2 
好 min- width: 600px; 47 |} 
13 |} 48 
14 49 | .box- table th.work, 
15 | .box-table th { 50 | .box-table td.work { 
16 background- color: #f0fbeb; 51 text- align: center 
3 text- align: left; S52 | 
18 |} 53 
19 54 | .box- table tr.nocaption th, 
20 | .box- table th, .box- table td { 55 | .box- table tr.caption th { 
2 line- height: 3lpx; 56 border- top: lpx solid #d7d7d7; 
22 border: lpx solid #d7d7d7; Sy | 
23 pagding: 0 5px7 58 
24 border- top: 07 59 | box-table th.first, box-table td.first { 
border- left: 0; 60 border- left: lpx solid #d7d7d7; 
26 |} 61 |} 
27 62 
28 | .box- table th.c, .box-table td.c { 63 | .PriceRMB { 
29 text-align: center; 64 font- family: Arial; 
30 |} 65 font- size: 1.125em 
31 66 |} 
32 | .box- table th.r, 67 
33 | .box-table td.r { 68 | .yellow { 
34 text- align: right; 69 Color: #£60; 
5 | 主 加 | 
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3. 创建 网 页 文档 0404. html 与 链接 外 部 样式 表 


在 文件 夹 0404 中 创建 网 页 文档 0404. html。 切 换 到 网 页 文档 0404. html 的 【代码 视 
图 】, 在 标签 二 /head> 的 前 面 输入 链接 外 部 样式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 
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4. 在 网 页 中 插入 表格 与 输入 文本 内 容 


在 网 页 文档 0404. html 中 插入 表格 ,添加 必要 的 HTML 标签 .插入 表格 与 输入 文本 
内 容 , 对 应 的 HTML 代码 如 表 4-13 所 示 。 


表 4-13 网 页 0404. html 的 HTML 代码 














序号 HTML 代码 
01 | < section> 
02 <table cellspacing="0" class= "box- table" > 
03 <tr class= "nocaption"> 
04 <th class= "first c" width= "10% "> 票 类 < /th> 
05 <th class="tdl c" width= "30% "> 票 名 < /th> 
06 <th class= "tdl c" width= "15%"> 票 种 < /th> 
07 <th class= "tdl c" width= "15% "> 票面 价 < /th> 
08 <th class= "tdl c" width= "15$ "> 网 上 价 < /th> 
09 <th class= "tdl tdr work c" width= "15% "> 票数 < /th> 
10 </tr> 
二 <tr class="listItem"> 
这 <td class="first c" rowspan= "1"> 套 票 < /td> 
13 <td class= "tdl" rowspan= "1"><b> 全 价 套 票 </b></td> 
14 <td class= "tdl c"> 成 人 票 < /td> 
臣 <td class="tdl tdl c priceRMB"> ¥ 160.00< /td> 
16 <td class="tdl tdl c priceRMB"><b class="yellow"> ¥ 160.00< /b>< /td> 
17 <td class= "tdl tdr c">1</td> 
18 </tr> 
9 <tr class="listItem odd" > 
20 <td class= "first c" rowspan= "1"> 套 票 < /td> 
21 <td class= "tdl" rowspan= "1"><b> 优 惠 套 票 </b>< /td> 
22 <tqd class= "tdl c"> 优 惠 票 < /td> 
23 <td class= "tdl c priceRMB"> ¥ 120.00< /td> 
24 <td class= "tdl c priceRMB"> <b class="yellow"> ¥ 120.00< /b>< /td> 
5 <td class="tdl tdr c"> 2< /td> 
26 </tr> 
27 <tr class="listItem odd" > 
28 <td class= "first c" rowspan= "1"> 门 票 < /td> 
29 <td class= "tdl" rowspan= "1l"><b> 单 门票 </b>< /td> 
30 <td class= "tdl c"> 成 人 票 < /td> 
31 <td class= "tdl c priceRMB"> ¥ 80.00< /td> 
32 <td class= "tdl c priceRMB"> <b class= "yellow"> ¥ 80.00< /b>< /td> 
33 <td class="tdl tdr c"> 3< /td> 
34 </tr> 
35 <tr class= "1istItem" > 
36 <td class= "first c" rowspan= "1"> 门 票 < /td> 
37 <td class= "tdl" rowspan= "1"><b> 单 优惠 门票 </b>< /td> 
38 <tqd class= "tdl c"> 优 惠 票 < /td> 
39 <td class= "tdl c priceRMB"> ¥ 40.00< /td> 
40 <td class= "tdl c priceRMB"><b class="yellow"> ¥ 40.00< /b>< /td> 
41 <td class= "tdl tdr c"> 4< /td> 
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续 表 

序号 HTML 代码 

42 :A 

43 <tr class="listItem odd" > 

44 <tqd class="first c" rowspan= "1"> 门 票 </td> 

45 <td class= "tdl" rowspan= "1"><b> 儿 童 免票 </b>< /td> 

46 <td class="tdl c"> 优 惠 票 < /td> 

47 <td class= "tdl c priceRMB">¥ 0.00< /td> 

48 <td class= "tdl c priceRMB"><b class="yellow"> ¥ 0.00< /b>< /td> 

49 <td class= "tdl tdr c">5< /td> 

50 </tr> 

51 </table> 

52 |</section> 





5. 保存 与 浏览 网 页 
保存 网 页 文档 0404. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 4-17 所 示 。 


【同步 训练 】 
任务 4-5 创建 项 目 列表 为 主 的 旅游 攻略 标题 网 页 


(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 0405. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 0405. html 中 添加 必要 的 HTML 标签 和 输入 所 需 的 文字 。 

(4) 浏览 网 页 0405. html 的 效果 ,如 图 4-18 所 示 , 该 网 页 包含 项 目 列表 形式 表现 的 旅 
游 攻略 标题 。 





图 4-18 网 页 0405. html 的 浏览 效果 


提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
忌 
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任务 4-6 创建 包含 5 行 3 列表 格 的 网 页 





(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 
(2) 创建 网 页 文档 0406. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 0406. html 中 添加 必要 的 HTML 标签 ,插入 表格 和 输入 文字 。 

(4) 浏览 网 页 0406. html 的 效果 ,如 图 4-19 所 示 ,该 网 页 包含 一 个 5 行 3 列 的 表格 。 


部 站 业务 范围 电话 


客户 服务 部 NS 景区 门票 包车 咨询 、 订 票 改 简 处 理 、 办 理 | 400_0g8.6969 转 1 


网 站 运营 部 。 | 网 站 运营 、 新 闻 发 布 、 技 术 支 滩 、 活 动 策划 028-87037858 
个 性 化 旅游 部 | 提供 自助 行 旅游 产品 预订 和 酒店 预订 服务 400-088-6969 转 2 
国 队 部 承接 旅行 社团 队 地 接 业 务 ， 商 务 ， 会 奖 028-61674822 





4-19 网 页 0406. html 的 浏览 效果 


提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 】 


1. 控制 列表 项 行内 显示 的 方法 


列表 项 默认 以 单列 垂直 显示 ,也 可 以 在 一 行内 并 列 显示 ,实现 的 方法 也 有 两 种 。 

1) 设置 列表 项 向 左 浮动 

定义 列表 项 的 float 属性 值 为 left。 

2) 列表 项 定义 为 内 联 元 素 

定义 列表 项 为 内 联 元 素 ,实现 列表 项 行内 并 列 流 动 。 

2. 控制 列表 符号 个 性 化 显示 的 方法 

1) 使 用 list-style-image 属性 设置 列表 项 的 图 像 符 号 Lr 

为 list-style-image 属性 设置 正确 的 图 像 地 址 和 图 像 名 称 , 从 而 设置 国 
列表 项 的 图 像 符号 。 4 

2) 使 用 background 属性 控制 列表 项 的 图 像 符号 

使 用 background-image 属性 设置 背景 属性 ,并 使 用 background- 
position 属性 精确 定位 背景 图 像 的 位 置 。 背 景 图 像 必须 指定 有 效 的 图 像 地 址 , 且 不 重复 。 


3. 应 用 CSS 样式 实现 列表 的 截 字 效果 


设计 网 页 时 可 以 应 用 CSS 样式 实现 列表 的 截 字 处 理 , 被 截 除 的 内 容 用 *…… ”表示 ， 
如 图 4-20 所 示 。 
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[个 信 m 梯 办 万 千 风情 的 地 方 了 ， 神秘 奇特 的 自然 凡 光 和 …"| 


图 4-20 列表 的 截 字 效 果 





制作 网 页 时 将 列表 文字 书写 完全 ,是 否 显示 由 CSS 进行 控制 ,这 也 有 助 于 SEO, 搜 索 
引擎 可 以 获取 完整 的 列表 内 容 。 

CSS 截 字 效果 由 三 条 属性 定义 完成 , 即 强调 文本 在 一 行内 显示 ,文本 不 换行 (CSS 代 
码 为 white-space: nowrap;) ,设置 元 素 内 文本 溢出 显示 省 略 标记 (CSS 代码 为 text- 
overflow: ellipsis; ) ,设置 溢出 隐藏 (CSS 代码 为 overflow: hidden; ) 。 

实现 列表 的 截 字 效 果 的 HTML 代码 如 下 : 

<ul> 

<1i> 很 难 找到 一 个 像 阿坝 这 样 汇聚 万 千 风情 的 地 方 了 ,神秘 奇特 的 自然 风光 和 多 元 民族 的 古 


老 文化 在 此 浪漫 相遇 。< /1i> 
</ul> 


实现 列表 的 截 字 效果 的 CSS 代码 如 下 : 


入 站 
font- size:12px; 
Color: #16a; 
width:400px; 
white- space:nowrap; 
text- overflow:ellipsis; 
overflow:hiddeny 

} 


4. 使 用 CSS 样式 改善 数据 表格 显示 样式 的 基本 方法 


标准 布局 模型 中 表格 的 主要 功能 是 组 织 和 显示 数据 。 当 数据 较 多 ,应 使 用 CSS 样式 
来 改善 数据 表格 的 版 式 , 通 过 添加 边框 ` 背 景色, 调整 单 元 格 间距 ,设置 表格 的 宽度 和 高 度 
等 措施 使 数据 的 可 读 性 增加 ,方便 浏览 者 快速 准确 地 浏览 。 

(1) 标题 行 与 数据 行 要 有 区 分 ,让 浏览 者 能 够 快速 地 分 出 标题 行 和 数据 行 ,可 以 通过 
分 别 为 标题 行 和 数据 行 设置 不 同 的 背景 色 来 实现 。 

(2) 标题 与 正文 的 文本 显示 效果 要 有 区 别 , 可 以 通过 分 别 定义 标题 与 正文 不 同 的 字 
体 . 大 小 .颜色 ,粗细 等 文本 属性 来 实现 。 

(3) 为 了 避免 阅读 中 出 现 的 读 错 行 现象 ,可 以 适当 增加 行 高 ,或 者 交替 定义 不 同 的 行 
背景 色 等 方法 来 实现 。 

(4) 为 了 在 多 列 数据 中 快速 找到 某 列 数据 ,可 以 适当 增加 列 宽 , 或 者 定义 不 同 的 列 背 
景色 等 方法 来 实现 。 


【问题 探究 】 


【问题 1】 表格 的 组 成 元 素 有 哪些 ? 
表格 的 组 成 元 素 主 要 包括 行 、 列 、 单 元 格 ,如 图 4-21 所 示 。 
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边框 















































图 4-21 表格 的 组 成 元 素 


(1) 单元 格 : 表格 中 的 每 1 个 小 格 称 为 1 个 单元 格 。 

(2) 行 : 水 平方 向 的 一 排 单 元 格 称 为 一 行 。 

(3) 列 : 垂直 方向 的 一 排 单元 格 称 为 一 列 。 

(4) 边框 : 整 张 表 格 的 外 边缘 称 为 边框 。 

(5) 间距 : 指 单元 格 与 单元 格 之 间 的 距离 。 

【问题 2】 表格 在 制作 网 页 时 的 主要 用 途 有 哪些 ? 

1) 利用 表格 布局 网 页 中 的 文字 、 图 像 等 页 面 元 素 

要 实现 网 页 的 排版 布局 ,可 以 首先 向 网 页 中 插入 1 个 或 几 个 大 表格 ,预先 设计 好 行列 
的 分 布 ,然后 把 图 像 文本、 多 媒体 对 象 等 页 面 元 素 分 别 插入 表格 里 合适 的 单元 格 中 。 用 
来 进行 网 页 排版 的 表格 ,其 边框 一 般 应 设 为 0, 这 样 用 浏览 器 浏览 时 就 不 会 看 到 这 个 表格 
了 ,以 免 影 响 网 页 的 美观 。 

2) 利用 表格 合成 尺寸 较 大 的 图 像 

制作 网 页 时 经 常 要 用 到 图 像 ,但 是 如 果 图 像 太 大 ,会 影响 用 户 的 浏览 速度 ,一 般 来 说 ， 
网 页 中 单个 图 像 应 该 控制 在 15KB 之 内 ,最 大 不 要 超过 20KB。 

3) 应 用 表格 存储 文本 或 数据 ,便于 对 数据 进行 排序 

应 用 表格 存储 文本 或 数据 时 ,表格 与 页 面 中 的 文本 、 图 像 等 其 他 元 素 功能 相似 ,只 是 
页 面 的 1 个 组 成 元 素 。 

【问题 3】 在 网 页 中 选择 表格 和 表格 元 素 有 了 哪些 方法 ? 

在 进行 表格 操作 之 前 ,首先 必须 选 定 被 操作 的 对 象 ,对 于 表格 而 言 ,可 以 选 定 整 个 表 
格 \ 单 行 .单列 多 行 、 多 列 、 连 续 或 不 连续 的 单元 格 。 

(1) 选择 整个 表格 。 

(2) 选择 单行 或 者 单列 。 

(3) 选择 连续 的 多 行 或 多 列 。 

(4) 选择 不 连续 的 多 行 或 多 列 。 

(5) 选择 1 个 单元 格 。 

(6) 选择 连续 的 单元 格 。 

(7) 选择 不 连续 的 单元 格 。 

【问题 4】 通过 表格 的 [属性] 面板 可 以 设置 表格 的 属性 ,解释 表格 的 [属性 ] 面 板 中 
各 项 属性 的 含义 。 

表格 的 [属性 ] 面 板 如 图 4-22 所 示 。 
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图 4-22 表格 的 [属性 ] 面 板 


表格 的 [属性 ] 面 板 中 各 项 属性 含义 如 下 。 

(1) 表格 标识 : 用 来 设置 表格 的 标识 名 称 ,便于 以 表格 为 对 象 进行 编程 。 

(2) 行 、 列 : 用 来 设置 表格 的 行 数 或 列 数 。 

(3) 宽 : 用 来 设置 表格 的 宽度 ,其 右 侧 的 下 拉 列 表 框 用 来 设置 宽度 的 单位 ,有 两 个 选 
项 :“%” 和 “像素 ”。 

(4) CellPad( 单 元 格 边 距 ): 用 来 设置 单元 格 边框 与 其 内 容 之 间 的 距离 ,单位 是 像素 。 

(5) CellSpace( 单 元 格 间距 ) : 用 来 设置 表格 单元 格 与 单元 格 之 间 的 距离 ,单位 是 像 
素 。 输 入 的 数值 越 大 ,单元 格 之 间 的 边框 线 就 越 粗 ,单元 格 与 单元 格 之 间 的 距离 就 越 大 。 

(6) Border( 边 框 ): 用 来 设置 表格 边框 的 宽度 ,单位 是 像素 。 

(7) Align( 对 齐 ) : 用 来 设置 表格 相对 于 同一 段落 中 其 他 页 面 元 素 (例如 文本 或 图 像 ) 
的 对 齐 方式 “对齐 ”下拉 列表 框 中 有 4 个 选项 :“ 上 默认 ”“ 左 对 齐 ”“ 居 中 对 齐 ”“ 右 对 齐 ”。 
其 中 “默认 ”的 对 齐 方式 是 以 浏览 器 默认 的 对 齐 方 式 来 对 齐 ,一 般 为 “ 左 对 齐 ”。 

(8) 图 和 国 : 用 来 清除 表格 中 的 所 有 明确 指定 的 列 宽 或 者 行 高 ,表格 中 的 单元 格 可 
以 根据 内 容 自动 调整 适合 其 显示 的 最 合适 的 宽度 或 者 高 度 。 

(9) 图 : 用 来 将 表格 的 宽度 由 “百分比 ”转换 成 “像素 ”。 

(10) 图 : 用 来 将 表格 的 宽度 由 “像素 ”转换 成 “百分比 ”。 

【问题 5】 通过 表格 单元 格 的 [属性] 面板 可 以 设置 单元 格 的 属性 ,解释 单元 格 的 【 属 
性 面板 中 各 项 属性 的 含义 。 

表格 单元 格 的 [属性 了 面板 如 图 4-23 所 示 。 





4-23 ”表格 单元 格 的 [属性 3 面板 


表格 单元 格 的 [属性 了 面板 中 各 项 属性 含义 如 下 。 

(1) 水 平 : 设置 单元 格 内 容 的 水 平 对 齐 方式 ,有 默认 、 左 对 齐 、 居 中 对 齐 、 右 对 齐 4 种 
对 齐 方式 。 

(2) 垂直 : 设置 单元 格 内 容 的 垂直 对 齐 方式 ,有 默认 、 顶 端 、 居 中 、 底 部 、 基 线 5 种 对 齐 
方式 。 

(3) 宽 、 高 : 设置 单元 格 的 宽度 和 高 度 。 如 果 要 指定 百分比 ,需要 在 输入 的 数值 后 面 
加 % 符 号 ;如 果 要 让 浏览 器 根据 单元 格 内 容 以 及 其 他 列 和 行 的 宽度 和 高 度 确定 适当 的 宽 
度 或 高 度 , 则 将 “ 宽 ”" 和 “高 "文本 框 保留 为 空 , 不 输入 指定 数值 。 
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(4) 背景 颜色 : 设置 单元 格 的 背景 颜色 。 

(5)“ 不 换行 " 复 选 框 : 选中 该 复 选 框 ,禁止 单元 格 中 文字 自动 换行 。 

(6)“ 标 题 " 复 选 框 : 选中 该 复 选 框 ,将 所 在 单元 格 设置 为 标题 单元 格 ,默认 情况 下 ， 
标题 单元 格 中 的 内 容 被 设置 为 粗 体 并 居中 显示 。 

(7) 国 | 按钮 : 将 所 选 的 单元 格 合并 为 1 个 单元 格 。 

(8) 疙 | 按钮 : 将 所 选中 的 1 个 单元 格 拆 分 为 多 个 单元 格 ,一 次 只 能 拆 分 1 个 单元 格 。 

【问题 6】 在 网 页 中 调整 表格 大 小 的 方法 有 哪些 ? 

1) 拖 动 控制 柄 改变 表格 大 小 

首先 选中 表格 ,选中 的 表格 带 有 粗 黑 的 外 边框 ,并 在 下 边 中 点 .右边 中 点 、 右 下 角 分 别 
显示 小 正方 形 的 控制 柄 ,如 图 4-24 所 示 。 


0% 29)» 











~ \ 
一 一 一 生 搜 制 本 
图 4-24 ”通过 拖 动 控制 柄 调整 表格 大 小 


然后 使 用 鼠标 拖 动 控制 柄 以 调整 表格 的 大 小 , 拖 动 右 边 中 点 调整 表格 宽度 ; 拖 动 下 边 
中 点 调整 表格 高 度 , 拖 动 表格 右 下 角 的 控制 柄 ,可 以 同时 调整 表格 的 宽度 和 高 度 。 

2) 通过 表格 的 [属性 了 面板 调整 表格 大 小 

先 选中 表格 ,然后 在 表格 的 【属性 3 面板 中 的 “ 宽 " 和 “高 "文本 框 中 直接 输入 新 的 数值 ， 
也 可 以 精确 调整 表格 的 大 小 。 

3) 改变 行 高 或 列 宽 

用 鼠标 拖 动 某 行 的 下 边线 可 以 改变 其 行 高 ;用 鼠标 拖 动 某 列 的 右边 线 可 以 改变 其 列 
宽 。 用 这 种 方法 调整 行 高 或 列 宽 ,会 影响 到 相 邻 的 行 或 列 的 高 度 或 宽度 ,如 果 要 保持 其 他 
的 行 或 列 不 受 影响 , 按 住 Shift 键 后 再 进行 拖 动 即 可 。 还 可 以 使 用 [属性 ] 面 板 指定 选 定 
行 或 列 的 高 度 或 宽度 。 

4) 改变 单元 格 大 小 

先 选中 单元 格 , 然 后 直接 在 [属性 面板 中 的 “ 宽 ” 或 “高 ”文本 框 中 输入 新 的 数值 即 可 
改变 单元 格 的 大 小 。 但 同一 行 或 同一 列 的 其 他 单元 格 也 会 受 影响 。 


(三 ) 简 答 题 
提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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-个 网 站 由 多 个 网 页 组 成 ,各 个 网 页 之 间 可 以 通过 超 链 接 相互 联系 ,使 网 站 中 多 个 页 

面 构成 一 个 有 机 整体 ,使 访问 者 能 够 在 各 个 页 面 之 间 跳 转 。 超 链接 是 网 页 中 基本 元 素 之 
- ,利用 它 不 仅 可 以 进行 网 页 间 的 相互 链接 ,还 可 以 使 网 页 链接 到 相关 的 图 像 文件 、 多 媒 
体 文件 以 及 下 载 程序 等 。 

网 页 中 的 导航 栏 是 超 链接 的 综合 应 用 ,为 了 方便 网 站 访问 者 浏览 网 站 中 的 相关 信息 ， 
通常 将 许多 超 链 接 有 规律 地 排列 网 页 的 上 部 或 者 左 侧 , 这 些 超 链 接 就 是 浏览 者 访问 网 站 
的 向 导 ,形象 地 称 为 “导航 栏 ", 尤 其 是 首页 一 般 都 有 导航 栏 。 导 航 栏 是 浏览 网 站 时 的 路 
标 , 导 航 栏 是 一 组 超 链接 ,链接 的 对 象 是 站 点 的 主页 及 其 他 重要 网 页 ,作用 是 引导 浏览 者 
浏览 网 页 。 浏 览 者 可 以 通过 导航 栏 对 网 页 的 结构 有 一 个 大 致 了 解 ,通过 单 击 导航 栏 中 的 
菜单 ,可 以 快速 进入 某 个 网 页 。 


【知识 必 备 】 


1. HTMLS 的 超 链接 与 导航 标签 

1) 二 a 标签 

二 a 二 标签 用 于 定义 超 链接 ,用 于 从 一 张 页面 链 接 到 另 一 张 页 面 。 二 a 请 元 素 最 重要 
的 属性 是 href 属性 , 它 指示 链接 的 目标 。 示 例 代码 如 下 : 

<a href= "http://m.haol23.com/">haol23.< /a> 


在 所 有 浏览 器 中 ,链接 的 默认 外 观 是 : 未 被 访问 的 链接 带 有 下 夯 线 而 且 是 蓝 色 的 ;已 
被 访问 的 链接 带 有 下 画 线 而 且 是 紫色 的 ;活动 链接 带 有 下 夯 线 而 且 是 红色 的 。 
如 果 不 使 用 href 属性 , 则 不 可 以 使 用 如 下 属性 : download hreflang、media、 rel、 
target 以 及 type 属性 ,这 些 属性 含义 如 表 5-1 所 示 。 
表 5-1 HTMLS 中 <<a 之 标签 的 新 属性 
属性 名 称 取 值 属性 描述 








download | filename 规定 被 下 载 的 超 链接 目标 











href URL 规定 链接 指向 的 页 面 的 URL 
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续 表 
属性 名 称 取 值 属性 描述 
hreflang language_code 规定 被 链接 文档 的 语言 
media media_query 规定 被 链接 文档 是 为 何 种 媒介 /设备 优化 的 
rel text 规定 当前 文档 与 被 链接 文档 之 间 的 关系 
target _blank、parent、self、top framename 规定 在 何 处 打开 链接 文档 
type MIME type 规定 被 链接 文档 的 MIME 类 型 


target 属性 有 多 个 选项 可 供 选 择 ,各 个 列表 项 的 含义 如 表 5-2 所 示 。 被 链接 页 面 通 
常 显示 在 当前 浏览 器 窗口 中 ,除非 使 用 target 属性 指定 了 另 一 个 目标 。 


表 5-2 超 链接 的 打开 方式 








超 链接 的 打开 方式 链接 网 页 的 打开 窗口 或 位 置 
_blank 在 1 个 新 的 未 命名 的 浏览 器 窗口 中 打开 链接 的 网 页 
new 在 1 个 新 的 浏览 器 窗口 中 打开 链接 的 网 页 





如 果 是 能 套 的 框架 ,在 父 框架 或 窗口 中 打开 ;如 果 不 是 典 套 的 框架 , 则 等 
同 于 _top, 链 接 的 网 页 在 浏览 器 窗口 中 打开 


_self 在 当前 网 页 所 在 的 窗口 或 框架 中 打开 链接 的 网 页 
_top 在 整个 浏览 器 窗口 打开 链接 的 网 页 ,并 由 此 取消 所 有 的 框架 


_parent 











2) 一 nav 二 标签 
过 nav 过 标签 用 于 定义 页 面 导航 ,表示 页 面 中 导航 链接 的 部 分 。 示 例 代 码 如 下 : 
<nav> 

<a href="index.html"> Home< /a> 

<a href="pre.html"> Previous< /a> 


<a href="next .html">Next< /a> 


< /nav> 


2. 超 链接 的 类 型 


1) 外 部 链接 

外 部 链接 的 HTML 代码 如 下 : 

<a href="http://www.zjjvip.com" target=" blank"> 张 家 界 旅游 网 < /a> 
2) 内 部 链接 

文字 型 内 部 链接 的 HTML 代码 如 下 : 


<a href="webpage/tzs.html" title= "欣赏 天 子 山 美景 " target=" blank"> 天 子 山 自然 保护 区 </ 
已 > 


图 片 型 内 部 链接 的 HTML 代码 如 下 : 


<a href- "webpage/bfh.html" target—" blank"> < img src= "images/bfh.jpg" width= "170" height=" 
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122" alt=" 云 梯 百 丈 上 天 台 , 高 峡 平湖 一 鉴 开 " hspace="10" vspace="6" border="0" align=" 
right" /></a> 


3) 命名 锚 记 的 超 链接 
锚 点 链接 是 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 的 链接 。 
命名 锚 记 的 HTML 代码 如 下 : 
<a name= "top" id= "top"></a> 
命名 锚 记 的 超 链 接 的 HTML 代码 如 下 : 
<a href- 啡 top">< img src= "images/06.gif" width= "40" height= "20" alt= "img07" />< /a> 
4) E-mail 链接 
E-mail 链接 的 HTML 代码 如 下 : 
<ahref= "mailto:abce163.com? subject= 对 网 站 的 意见 与 建议 "> 您 的 建议 </a> 
5) 下 载 链接 
下 载 链接 的 HTML 代码 如 下 : 
<a href="images/img.rar">【 下 载 更 多 的 图 片 ]< /a> 
6) 图 像 热 点 链接 
图 像 热 点 链接 的 HTML 代码 如 表 5-3 所 示 。 
表 5-3 图 像 热 点 链接 的 HTML 代码 


行 号 HTML 代码 


01 |<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> 
02 |<map name= "planetmap" id="planetmap"> 





03 <area shape= "circle" coords= "180,139,14" href ="one.html" alt="one" /> 
04 <area shape= "circle" coords= "129,161,10" href ="two.html" alt= "two" /> 
05 <area shape= "rect" coords= "0, 0,110, 260" href = "three.htmL" alt= "three" /> 
06 |</map> 





二 area 标 签 用 于 定义 图 像 映射 中 的 热点 区 域 (图像 映 射 是 指 带 有 可 单 击 区 域 的 图 
像 )。 定 义 图像 映 射 区 域 的 形状 使 用 二 shape 二 标签 ,其 中 ciercel 为 椭圆 形 区 域 ,rect 为 矩 
形 区 域 ,poly 为 多 边 形 区 域 。 

设置 不 同 区 域 的 链接 地 址 使 用 二 href 志 标签 ;设置 区 域 坐 标 使 用 二 coords 二 标签 ; 设 
置 替 代 文 字 使 用 二 alt 二 标签 ;设置 打开 的 目标 窗口 使 用 二 target 二 标签 。 

二 area 二 标签 总 是 租 套 在 二 map 二 标签 中 .二 img 二 标签 中 的 usemap 属性 与 map 元 
素 的 name 属性 相关 联 ,创建 图 像 与 映射 之 间 的 联系 。 二 img 二 中 的 usemap 属性 可 引用 
近 map 二 中 的 id 或 name 属性 (由 浏览 器 决定 ) ,所 以 需要 同时 向 过 map 二 添加 id 和 name 
这 两 个 属性 。 在 对 应 的 图 像 标 签 中 添加 代码 “usemap 二 "#planetmap"”, 其 中 planetmap 
为 图 像 映 射 标签 的 name 属性 值 。 

HTML5 的 area 标签 的 属性 如 表 5-4 所 示 。 
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表 5-4 HTMLS5 的 area 标签 的 属性 


























属 性 值 描 述 

alt text 定义 此 区 域 的 蔡 换 文本 

coords 坐标 值 定义 可 单 击 区 域 ( 对 鼠标 敏感 的 区 域 ) 的 坐标 
href URL 定义 此 区 域 的 目标 URL 

nohref nohref 从 图 像 映 射 排除 某 个 区 域 

shape default ,rect\circ、poly 定义 区 域 的 形状 

target _blank、parent、self、top 规定 在 何 处 打开 href 属性 指定 的 目标 URL 


【引导 训练 】 
任务 5-1 设置 网 页 中 导航 栏 的 超 链接 属性 


【任务 模 述 】 


在 网 页 中 输入 以 下 HTML 标签 及 文字 。 


<header> 
<section> 
<hl class= "logo"><a href= 叶 " target=" blank" title=" 阿 坝 旅游 "> 阿坝 旅游 < /a> 
</hl> 
< /section> 
< /header> 
< section> 
<div class= "w-url"><a href=- "#" target=" self"> 阿 坝 旅游 < /a> 
gnbsp; &gt; &gt; gnbsp; <a href="#" target=" self"> 大 美 阿坝 < /a> 
&nbsp; &gt; &gt; gnbsp; <a href="#" target=" self"> 九 寨 沟 景区 亮点 < /a> 
</div> 


</section> 


针对 上 述 项 目 列表 以 及 列表 项 进行 各 种 类 型 的 列表 属性 设置 。 
(1) 为 超 链 接 的 四 种 不 同 状态 a: link、a: visited、a: hover、a: active 设置 color、text- 
decoration ,font-family、font-size、font-weight、background 等 属性 。 


(2) 尝试 设置 超 链接 的 download .rel target 和 type 等 属性 。 
【任务 忌 施 】 


1. 创建 所 需 的 文件 夹 和 复制 所 需 的 资源 


在 文件 夹 *HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit05 ,然后 在 该 文件 夹 
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中 创建 子 文件 夹 0501 ,再 在 该 子 文件 夹 0501 中 创建 css images 子 文件 夹 , 且 将 所 需 的 素 
材 复制 到 对 应 的 子 文件 夹 中 。 


2. 启动 Dreamweaver CC 
使 用 Windows 的 [开始] 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 创建 本 地 站 点 与 网 页 


创建 1 个 名 称 为 “单元 5” 的 本 地 站 点 ,站 点 文件 夹 为 Unit05。 在 该 站 点 的 文件 夹 
0501 中 创建 网 页 0501. html 


4. 定义 网 页 主体 布局 结构 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 5-5 所 示 。 
表 5-5 网 页 0501. html 中 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 
01 | body{ 
02 min- width: 1202px; 
03 line- height: 2em; 
04 margin: auto; 
05 background- image: url(../images/travel-bg.png); 
06 background- position: left top; 
07 background- repeat: repeat— x; 
08 background- color: #FFF; 
09 Color: #666; 
10 font- size: 12px; 
11 letter- spacing: Opx; 
12 white- space: normal; 
3 font- family: Tahoma， Geneva, sans- serif, "宋体 " 
14 } 
15 a:hover { 
16 Color: #2b98db; 
17 } 
18 html,body,div,hl,p,a { 
19 margin: 0; 
20 padding: 0; 
21 border: none; 
22 } 
23 
24 header, section { 
25 display: block; 
26 position: relative; 
27 margin: auto; 
28 } 
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续 表 
序号 CSS 代码 
29 
30 a:link, 
邓 a:visited { 
4 text— decoration: none; 
33 Color: #666; 





在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 5-6 所 示 。 


表 5-6 网 页 0501. html 中 样式 文件 main. css 的 CSS 代码 定义 

















序号 CSS 代码 序号 CSS 代码 
01 |section { 19 |header .logo af{ 
02 width: 1202px; 20 width: 322px; 
03 position: relative; 21 height: 48px; 
04 margin- top: 10px; 22 display: block; 
05 |} 23 overflow: hidden; 
06 24 line- height: 99em; 
07 |header .logo { 25. 1} 
08 width: 185px; 26 |.w-url 1{ 
09 height: 58px; 27 margin- bottom: 10px; 
10 padding: 20px 0 20px; 28 padding: 5px 10px; 
11 overflow: hidden; 29 background- image: linear- gradient 
12 line- height: 99em; 30 (top, # FFF, #EEE); 
3 background- image: 得 border- radius: 3px; 
14 Url(../images/travel- logp.png); 32 | 
15 background- position: left 25px; 33 |.w-url a:last- child:link, 
16 background- repeat: no- repeat; 34 |.w-url a:last- child:visited { 
4 position: relative; 35 Color: #2b98db; 
18 |} 36 |} 


5. 在 网 页 文档 0501. html 中 链接 外 部 样式 表 


切换 到 网 页 文档 0501. html 的 【代码 视图 】 ,在 标签 三 /head 二 的 前 面 输入 链接 外 部 样 
式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/base.css"/> 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 


6. 在 网 页 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 


在 网 页 文档 0501. html 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 , 对 应 的 HTML 
代码 如 【任务 描述 了 所 示 。 
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7. 保存 与 浏览 网 页 
保存 网 页 文档 0501. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 5-1 所 示 。 


阿坝 旅游 
ABATOUR.COM 





阿坝 旅游 >> 大 美 阿 巩 >> 九寨 沟 暴 区 半点 


图 5-1 网 页 0501. html 的 浏览 效果 
然后 按照 任务 描述 的 要 求 不 断 改变 超 链 接 的 各 个 属性 设置 ,重新 浏览 其 效果 。 


任务 5-2 制作 包含 横向 主导 航 栏 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0502. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0502. html 中 添加 必要 的 HTML 标签 和 输入 导航 文字 。 

(4) 浏览 网 页 0502. html 的 效果 ,如 图 5-2 所 示 , 该 网 页 包含 两 种 形式 的 横向 导航 栏 。 


A 阿坝 旅游 
ABATOUR.COM 


首页 大 美 阿坝 。 “精彩 活动 。。 阿坝 动态 。 ”旅游 攻略 。 门票 预订 ”旅游 预订 





免费 注册 | 招聘 英才 | 联系 我 们 | 帮助 中 心 


图 5-2 网 页 0502. html 主导 航 栏 的 外 观 效果 之 一 


(5) 重新 编写 主导 航 的 HTML 代码 ,将 图 5-2 所 示 的 横向 导航 栏 的 外 观 效果 改变 为 
如 图 5-3 所 示 的 。 





| 人 a we ms i Rm] i 
5-3 网 页 0502. html 主导 航 栏 的 外 观 效果 之 二 


【任务 忌 邦 】 


1. 创建 文件 夹 与 网 页 


在 站 点 “单元 5” 中 创建 文件 夹 0502 ,在 该 文件 夹 中 创建 子 文件 夹 CSS、images。 在 文 
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件 夹 0502 中 创建 网 页 文档 0502. html。 


2. 定义 网 页 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 5-7 所 示 。 


表 5-7 网 页 0502. html 中 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 
01 body { 
02 min- width: 1202px; 
03 line- height: 2em; 
04 margin: auto; 
05 background- color: #fff; 
06 Color: #666; 
07 font- size: 12px; 
08 letter- spacing: Opx; 
09 font- family: Tahoma， Geneva, sans- serif, "宋体 " 
10 
11 html,body,div,hl,p,a { 
12 margin: 0; 
13 padding: 0; 
14 border: none; 
15 } 
16 header, nav, section, footer { 
7 display: block; 
18 position: relative; 
19 margin: auto; 
20 } 
21 
22 a:link, 
23 a:visited { 
24 text- decoration: none; 
25 Color: #666; 
26 } 
27 
28 a:hover { 
29 Color: #2b98db; 
30 } 





在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 5-8 所 示 。 


表 5-8 网 页 0502. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 
01 header { 
02 height: 132px; 
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续 表 

序号 CSS 代码 

03 width: 100% 7 

04 3 

05 

06 header .w-m{ 

07 background- color: #FFF; 

08 position: fixed; 

09 width: 100% 了 

10 top: 0; 

11 max— width: 1900px; 

12 } 

13 

14 header .logo { 

后 width: 322px; 

16 height: 48px; 

hi margin- left: 35px; 

18 padding: 20px 0; 

19 overflow: hidden; 

20 line- height: 99em; 

21 background- image: Url (../images/l0go.png); 

22 background- position: left center; 

23 background- repeat: no- repeat; 

24 position: relative; 

25 } 

26 

27 .nav-main { 

28 background- color: #2b98db; 

29 height: 44px; 

30 line- height: 44px; 

31 box- shadow: 0 5px 10px rgba (0,0,0, .3); 

32 border- bottom: 0; 

33 } 

34 

35 .nav—-main nav { 

36 margin- left: 0; 

37 background- color: #2B98DB 

38 } 

39 footer { 

40 padding: 0 0 20px; 

41 width: 100%; 

42 } 

43 footer .nav- footer { 

44 font- weight: bold 

45 } 

46 footer .w-m{ 

47 width: 100%; 

48 text- align: center; 
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3. 在 网 页 文档 0502. html 中 链接 外 部 样式 表 





续 表 

序号 CSS 代码 

49 line- height: 30px; 

50 | 

51 

52 header .logo af 

53 width: 322px; 

54 height: 48px; 

55 display: block; 

56 overflow: hidden; 

57 line- height: 99em; 

58 } 

59 

60 -nav-main nav a:link, 

61 .nav-main nav a:Visited { 

62 font- size: 16px7 

63 font- family: "Microsoft YaHei"7 

64 font- weight: bold; 

65 display: inline- block; 

66 height: 44px; 

67 line- height: 44px; 

68 width: 14%; 

69 text- align: center; 

70 Vertical-align: top; 

71 Color: #FFF; 

72 padding: 0; 

73 margin: 0 0 0 - 3px; 

74 background- image: 

75 url(../images/nav- main- line.png); 

76 background- position: right center; 

I background- repeat: repeat— y; 

78 border- radius: 0; 

79 } 

80 

81 .nav—main nav a:hover { 

82 background- color: #4cbbeb; 

83 background- image: none; 

84 Color: #FF6; 

85 } 

86 

87 .nav— main nav a:last- child:1ink, 

88 .nav-main nav a:last- child:visited { 

89 background- image: none; 

90 } 


页 
切换 到 网 页 文档 0502. html 的 【代码 视图 】, 在 标签 二 /head 二 的 前 面 输入 链接 外 部 样 
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式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/base.css"/> 


<link type= "text/css" rel= "stylesheet" href="css/main.css"/> 


4. 在 网 页 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 


在 网 页 文档 0502. html 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 , 对 应 的 HTML 
代码 如 表 5-9 所 示 。 


表 5-9 网 页 0502. html 的 HTML 代码 









序号 HTML 代码 
01 <header> 
02 <div class="w-m"> 
03 <section> 
04 <hl class="logo"><a href="" target=" self" title=" 九 网 旅游 "> 九 网 旅游 < /a 
05 ></hl> 
06 </section> 
07 <div class= "nav-main"> 
08 <nav id= "mainNav"> 
09 <a href="" class= "first"> 首 页 < /a> 
10 大 美 阿坝 < /a> 
11 target="” blank"> 精 彩 活动 < /a> 
12 阿坝 动态 < /a> 
bE 旅游 攻略 < /a> 
14 <a href=""> 门 票 预订 < /a> 
15 <a href= 哇 "> 旅游 预订 < /a> 
16 < /nav> 
17 </div> 
18 </div> 
3 < /header> 
20 <div style= "height:20px;">< /div> 
21 <footer> 
22 <section class="w-m"> 
23 <div class= "nav- footer"><a href=""> 免 费 注册 < /a> | <a href=""> 招 聘 英 才 < /a 
24 >1 
25 <a href=""> 联 系 我 们 </a> | <a href=""> 帮 助 中 心 </a>< /div> 
26 < /section> 
27 < /footer> 





5. 保存 与 浏览 网 页 
保存 网 页 文档 0502. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 5-2 所 示 。 
6. 重新 定义 主导 航 的 HTML 代码 与 CSS 代码 


将 表 5-9 中 HTML 代码 “一 a href 王 "" class 王 "first" 之 首页 一 /a>” 修 改 为 “<a href=="" 
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class 一 "on" 过 首页 <</a>>”。 


在 样式 文件 main. css 中 对 主导 航 栏 的 CSS 代码 重新 进行 定义 ,如 表 5-10 所 示 。 
表 5-10 样式 文件 main. css 中 重新 定义 主导 航 栏 的 CSS 代码 

















序号 CSS 代码 序号 CSS 代码 
01 |heager { 29 | .nav-main nav { 
02 width: 100%; 30 text- align: center; 
03 |} 六 margin- top: 10px; 
04 | .nav-main { 过 |} 
05 background- color: #19aldb; 33 
06 border- bottam: #elele2 lpx solid; 34 | .nav-main nav a:hover { 
07 height: 43px; 35 background- color: #4cbbeb; 
08 line- height: 43px; 36 background- image: none; 
09 box- shadow: 0 lpx lpx #elele2; 37 Color: #FF6 
10 |} 38 |} 
二 39 
12 | .nav-main nav a:link, 40 | .nav-main nav .on:link, 
13 | .nav-main nav a:visited { 41 | .nav-main nav .on:visited, 
14 padding: 0 25px 0 28px; 42 | .nav-main nav .on:hover { 
15 display: inline-block; 43 background- color: #FFF; 
16 margin: 5px 0 0 - 3px; 44 Color: #333; 
17 height: 38px; 45 background- image: none; 
18 line- height: 36px; 46 margin: 5px 9px 0 6px; 
19 border- radius: 6px 6px 0 0; 47 |} 
20 font- size: 16px; 48 
本 font- family: "Microsoft YaHei"7 49 | .nav-main nav .on:hover { 
22 font— weight: bold; 50 Color: #F60 
3 Color: #FFF; sy | 
24 background- image: er 
25 Url1(../imeges/nav-main- line png); 53 | .nav-main nav a:last- child:link, 
26 background- position: right center; 54 | .nav-main nav a:last- child:visited { 
ph background- repeat: no- repeat; 55 background- image: none; 
28 |} 56 |} 


网 页 0502. html 中 主导 航 栏 的 HTML 代码 与 CSS 代码 重新 定义 后 ,在 浏览 器 


Google Chrome 中 的 浏览 效果 如 图 5-3 


所 示 。 


任务 5-3 制作 包含 纵向 栏目 导航 栏 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 





属性 、 类 选择 符 及 其 属性 。 


(2) 创建 网 页 文档 0503. html, 且 链接 外 部 样式 文件 main. css。 
(3) 在 网 页 0503. html 中 添加 必要 的 HTML 标签 和 输入 文字 。 
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(4) 浏览 网 页 0503. html 的 效果 ,如 图 5-4 所 示 , 该 网 页 包含 纵向 排列 的 栏目 导 
航 栏 。 


阿坝 动 态 
【任务 袜 邦 】 请 公告 
1. 创建 文件 夹 与 网 页 -一 


在 站 点 “单元 5” 中 创建 文件 夹 0503 ,在 该 文件 夹 中 创建 图 片 新 闻 


子 文件 夹 CSS。 在 文件 夹 0503 中 创建 网 页 文档 0503. html。 
图 5-4 网 页 0503. html 


2. 定义 美化 超 链接 和 导航 栏 的 CSS 代码 的 浏览 效果 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 5-11 所 示 。 


表 5-11 网 页 0503. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 la:link,a:visited { 23 | .box-sort liaf{ 
02 text- decoration: none; 24 line- height: 40px; 
03 Color: #666; 25 height: 40px7 
04 |} 26 display: block; 
05 ba margin: 2px 5px; 
06 | .box- sort { 28 text- align: center; 
07 width: 160px; 29 text- indent: Spx; 
08 padding: 10px 0; 30 padding: 0 10px; 
09 margin- bottom: 10px; 31 font- weight: bold; 
10 margin- top: 10px; 32 font- size: 16px; 
于 33 font- family: 微 软 雅 黑 ; 
12 | .box- sort ul { 34 |} 
| background- color: #EOECEC; 35 
14 padding: 07 36 | .box- sort li a:hover { 
15 Overflow: hidden 37 Color: #0375e8; 
16 |} 38 |} 
17 | .box- sort li { 39 
18 border- top: 2px solid #FFF; 40 | .box- sort li.on a:link, 
19 |} 41 | .box- sort li.on a:visited, 
20 | .box- sort li.first { 42 | .box- sort li.on a:hover { 
询 border- top: 0; 43 Color: #0066cc; 
22 |} 44 |} 














3. 在 网 页 文档 0503. html 中 链接 外 部 样式 表 


切换 到 网 页 文档 0503. html 的 [代码 ] 视 图 ,在 标签 二 /head 二 的 前 面 输入 链接 外 部 样 
式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 
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4. 在 网 页 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 


在 网 页 文档 0503. html 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 , 对 应 的 HTML 
代码 如 表 5-12 所 示 。 
表 5-12 网 页 0503. html 的 HTML 代码 





序号 HTML 代码 
01 <div class= "box- sort"> 
02 <ul> 
03 <1i class= "first on"><a href=""> 阿 坝 动态 < /a>< /1i> 
04 <1i class=" "><a href=""> 旅 游 公告 </a></1i> 
05 <1i class=" "><a href=""> 行 业 新 闻 < /a></1i> 
06 <1i class=" "><a href=""> 行 业 研究 </a></1li> 
07 <1i class=" "><a href=""> 图 片 新 闻 < /a></1i> 
08 </ul> 
09 </div> 





5. 保存 与 浏览 网 页 
保存 网 页 文档 0503. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 5-4 所 示 。 


任务 5-4 创建 包含 图 像 热点 链接 的 网 页 


【任务 描述 】 


(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 
(2) 创建 网 页 文档 0504. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 0504. html 中 添加 必要 的 HTML 标签 与 输入 当前 位 置 导航 文字 。 

(4) 插入 旅游 地 图 ,并 在 旅游 地 图 绘制 多 种 形状 的 热点 区 域 。 

(5) 输入 各 个 热点 区 域 的 景点 导航 链接 文字 ,并 设置 好 超 链接 。 

(6) 浏览 网 页 0504. html 的 效果 ,如 图 5-5 所 示 ,该 网 页 包含 当前 位 置 的 导航 文字 和 


【任务 忌 邦 】 
1. 创建 文件 夹 
在 站 点 “单元 5” 中 创建 文件 夹 0504, 在 该 文件 夹 中 创建 子 文件 夹 CSS images。 


2. 定义 图 像 热点 链接 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 样式 文件 main. css 中 添加 样式 代码 美 
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图 5-5 网 页 0504. html 的 浏览 效果 


化 图 像 热 点 链接 ,CSS 代码 如 表 5-13 所 示 。 
表 5-13 ”样式 文件 main. css 中 的 CSS 代码 定义 





序号 CSS 代码 
01 a:link,a:visited { 
02 text- decoration: none; 
03 color: #666; 
04 } 
05 .mapMain { 
06 background- image: url(../images/travel-bg-map.png); 
07 width: 100%; 
08 margin- top: Spx; 
09 } 
10 .mapMain .w-m{ 
2 width: 100%; 
12 margin: 0 auto; 
13 padding- top: 8px; 
14 text- align: center; 
15 } 





3. 创建 网 页 文档 0504. html 与 链接 外 部 样式 表 


在 文件 夹 0504 中 创建 网 页 文档 0504. html, 切换 到 网 页 文档 0504. html 的 【代码 视 
图 】 在 标签 二 /head 二 的 前 面 输 入 链接 外 部 样式 表 的 代码 如 下 : 
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<link type= "text/css" rel= "stylesheet" href="css/main.css"/> 


4. 编写 网 页 主体 布局 结构 的 HTML 代码 
网 页 0504. html 主体 布局 结构 的 HTML 代码 如 下 : 


<div class= "mapMain" id= "mapMain"> 
<div class="w-m"> 
</div> 

</div> 


5. 插入 图 片 


在 网 页 0504. html 中 HTML 标签 二 div class 王 "w-m" 过 与 一 /div 二 之 间 插 入 旅游 地 
图 ,并 设置 该 图 片 的 id usemap 等 属性 。 


6. 绘制 热点 区 域 与 创建 图 像 热点 链接 


将 同一 幅 图 像 的 不 同 部 分 链接 到 不 同 的 网 页 文档 ,这 就 需要 用 到 热点 链接 。 要 使 图 
像 特定 部 分 成 为 超 链接 ,就 需要 在 图 像 中 设置 “热点 区 域 ”, 然 后 再 创建 链接 ,这 样 当 光标 
移 到 图 像 热点 区 域 时 会 变 成 手 的 形状 , 当 单 击 时 , 便 会 跳 转 到 特定 位 置 或 者 打开 链接 的 
网 页 。 

在 一 幅 尺 寸 较 大 的 图 像 中 ,可 以 同时 创建 多 个 热点 ,热点 的 形状 可 以 是 和 矩形、 椭圆 形 
或 多 边 形 。 

1) 选中 绘制 热点 区 域 的 图 像 

单 击 选中 网 页 0504. html 中 的 图 像 travel-map. png。 

2) 在 旅游 地 图 绘制 多 个 多 边 形 形状 的 热点 区 域 

在 图 像 的 [属性 面板 中 单 击 【多 边 形 热点 工具 按钮 图 ,此 时 鼠标 指针 变 成 “十 ” 形 
状 , 然 后 将 鼠标 指针 移 到 图 像 travel-map. png 右上 角 "* 九 寨 沟 县 ?的 合适 位 置 ,并 依次 在 
多 个 不 同 的 点 单 击 , 便 会 形成 1 个 任意 多 边 形 区 域 。 

图 像 travel-map. png 中 绘制 的 3 个 热点 区 域 如 图 5-6 所 示 。 

在 热点 的 【属性 了 面板 中 设置 热点 的 链接 属性 ,如 图 5-7 所 示 。 

最 后 单 击 热点 的 【属性 了 面板 左下 角 的 【指针 热点 工具 ] 员 ,结束 热点 区 域 的 绘制 状 
态 。 可 以 选中 热点 区 域 ,对 其 大 小 和 位 置 进行 适当 的 调整 。 





按钮 图 ,此 时 鼠标 指针 变 成 “十 ”形状 ,然后 将 鼠标 指针 移 到 图 片上 的 合适 位 置 , 按 住 鼠 标 
左 键 拖 动 绘制 一 个 和 矩形 , 当 短 形 的 大 小 合适 时 释放 鼠标 左 键 , 于 是 一 个 矩形 的 热点 区 域 便 

绘制 完成 , 且 用 透明 的 蓝 色 撼 形 显示 指定 图 像 的 热点 区 域 。 
绘制 椭圆 形 热 点 区 域 的 方法 如 下 : 在 图 像 的 [属性 了】 面板 中 单 击 【 圆 形 热点 工具 】 按 钮 
图, 此 时 饼 标 指针 变 成 “十 ”形状 ,然后 将 鼠标 指针 移 到 图 片上 的 合适 位 置 , 按 住 鼠 标 左 键 
拖 动 绘制 一 个 圆 形 , 当 圆 形 的 大 小 合适 时 释放 和 鼠标 左 键 , 于 是 一 个 圆 形 的 热点 区 域 便 绘 制 
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图 5-7 在 多 边 形 热点 的 [属性 了 面板 中 设置 链接 属性 


3) 设置 好 标签 二 map 过 的 属性 和 超 链接 
设置 好 标签 二 map 二 的 name.id 等 属性 ,设置 好 各 个 热点 区 域 的 景点 导航 链接 ,对 应 
的 HTML 代码 如 表 5-14 所 示 。 


表 5-14 网 页 0504. html 中 多 边 形 热点 区 域 的 部 分 HTML 代码 





序号 HTML 代码 
01 | <div class= "mapMain" id= "mapMain"> 
02 <div class="w-m"> 
03 < img height= "545" src="images/travel- map.png" id= "travelMap" alt="" usemap= "# 
04 Map"> 
05 <map name= "Map" id= "travelMapData"> 
06 <area shape= "poly" coords= "393, 87, 383, 96, 379, 104, 395, 120, 381, 142, 
07 378,168, 416, 186, 438, 206, 441, 189, 480, 207, 495, 196, 459, 95" 
08 href= "0502.html" target=" blank"> 
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续 表 

序号 HTML 代码 

09 <area shape="poly" coords="306, -1,278,17,261, 28, 253, 39, 209, 51, 224, 

10 74,231, 97, 249, 123, 220, 141, 255, 157, 266, 167, 285, 140, 340,154, 

11 366, 180, 390, 121, 385, 87, 388, 75, 359, 86, 340, 73, 337, 58, 340, 33, 

2 323,14" href="0502.html" target=" blank"> 

13 <area shape= "poly" coords="383, 173, 426, 198, 462, 230, 464, 271, 433, 269, 

14 431, 285, 476, 303, 459, 322, 421, 325, 392, 305, 370, 313, 360, 275, 348, 

15 255, 332, 280, 306, 281, 274, 293, 300, 248, 331, 212, 351, 224, 356, 209, 

16 363,192" href="0502.html" target=" blank"> 

17 < /map> 

18 </div> 

93 </div> 





7. 保存 与 浏览 网 页 


保存 网 页 文档 0504. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 5-5 所 示 。 
单 击 各 个 热点 链接 ,观察 其 效果 。 


【同步 训练 】 
任务 5-5 创建 包含 顶部 横向 导航 栏 的 网 页 


(1) 创建 样式 文件 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 0505. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 0505. html 中 添加 必要 的 HTML 标签 和 输入 导航 文字 。 

(4) 浏览 网 页 0505. html 的 效果 ,如 图 5-8 所 示 , 该 网 页 主要 为 横向 排列 的 文本 超 
链接 。 


阿坝 旅游 
ABATOUR.COM 


首页 大 美 阿 圳 





图 5-8 网 页 0505. html 的 浏览 效果 
提示 : 请 扫描 二 维 码 浏 览 提示 内 容 。 
局 
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任务 5-6 创建 包含 多 种 不 同形 状 
图 像 链 接 的 网 页 


(1) 创建 网 页 文档 0506. html, 在 该 网 页 中 添加 必要 的 HTML 标签 和 插入 一 张 景区 
图 片 。 

(2) 在 图 片 中 指点 位 置 分 别 绘制 矩形 、. 圆 形 多边形 热点 区 域 , 且 设置 热点 链接 。 

提示 : 网 页 0506. html 的 参考 HTML 代码 如 表 5-15 所 示 。 


表 5-15 网 页 0506. html 的 参考 HTML 代码 





序号 HTML 代码 
01 <div> 
02 < img src= "images/map.jpg" border= "0" usemap= "#Map"> 
03 <map name= "Map"> 
04 <area shape= "rect" coords= "48, 138, 319, 261" href="#"> 
05 <area shape="circle" coords= "445, 343, 81" href="#"> 
06 <area shape= "poly" coords= "178, 412, 250, 400, 314, 452, 239, 483, 164, 475" href="#" 
07 > 
08 < /map> 
09 </div> 





由 于 绘制 热点 区 域 时 在 起 点 位 置 、 区 域 大 小 等 方面 有 差异 ,所 以 实际 操作 生成 的 
HTML 代码 不 一 定 与 表 5-15 完全 一 致 。 


【技术 进 阶 7 


1. 利用 CSS 样式 定义 各 种 不 同形 式 的 超 链接 


一 般 通 过 标签 二 a 二 的 伪 类 a: hover 设置 各 种 不 同形 式 的 超 链接 ,由 于 标签 a 是 内 联 
元 素 , 为 了 更 有 效 设置 超 链接 各 种 样式 ,我 们 将 标签 a 的 display 的 属性 回忆 大 
设置 为 block, 即 定义 为 块 状元 素 。 超 链接 元 素 设 置 为 块 状元 素 后 ,就 可 WU 纤 
以 设置 该 元 素 的 宽度 .高度 .边界 .边框 填充 等 样式 ,这 样 做 便于 定义 各 
种 不 同形 式 的 超 链接 。 

(1) 背景 色 变换 的 文字 超 链 接 。 

(2) 背景 图 像 翻 转 的 超 链接 。 

(3) 边框 变换 的 超 链接 。 


2. 利用 定义 列表 制作 垂直 导航 栏 


利用 定义 列表 制作 垂直 导航 栏 相对 比较 容易 ,因为 列表 项 默认 是 以 垂直 方式 显示 的 ， 
可 以 使 用 dt 作为 菜单 标题 ,利用 dd 作为 菜单 项 。 利用 定义 列表 制作 垂直 导航 栏 的 
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HTML 代码 如 表 5-16 所 示 ,浏览 效果 如 图 5-9 所 示 。 
表 5-16 利用 定义 列表 制作 垂直 导航 栏 的 HTML 代码 





行 号 HTML 代码 

01 | <dlid-"™menus"> 

02 <dt> 快 乐 旅游 < /at> 

03 <dd><a href="#" target=" blank"> 首 页 < /a></dd> 

04 <dd><a hre 全 只" target=" blank"> 国 内 游 < /a>< /dd> 
05 <dd><a href="#" target="”blank"> 出 境 游 </a>< /dd> 
06 <dd><a href= 叶 " target=" blank"> 城 市 旅游 </a>< /dd> 
07 <dd><a href="#" target=" blank"> 乡 村 旅游 </a>< /dd> 
08 <dd><a href- " 虽 " target="” blank"> 周 边 游 < /a>< /dd> 
09 <dd><a href= 哇 " target="” blank"> 电 子 地 图 < /a>< /dd> 
10 | </dl> 








5-9 利用 定义 列表 制作 的 垂直 导航 栏 


利用 定义 列表 制作 垂直 导航 栏 的 CSS 代码 如 表 5-17 所 示 。 
表 5-17 利用 定义 列表 制作 垂直 导航 栏 的 CSS 代码 





行 号 CSS 代码 行 号 CSS 代码 
01 |#menus { 19 |#menus dd { 
02 width: 100px; 20 background- color: #cc9; 
03 font- size:12px7 21 line- height: 25px; 
04 FE 22 text- indent: 2em; 
05 23 height: 25px; 
06 |#menus dt { 24 margin: 07 
07 font- size: 14px; 25 13 
08 font- weight: bold; 26 
09 text- align: center; 27 |#menus af 
10 background- color: # cff7 28 font- size: 12px; 
11 margin: 0; 29 Color:# 666; 
12 Padding: 10px; 30 font- weight :bold; 
p= 31 |} 
14 #menus a, #menus a:visited { 32 
的 text- decoration: none; 33 |#menus a:hover { 
16 display: block; 34 Color: #03c; 
17 width: 100px; 35 background- color: #f9f; 
18 |} 36 |} 
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3. 利用 CSS 样式 实现 水 平 导航 栏 及 分 隔 小 坚 条 


网 页 0502. html 中 导航 栏 中 的 分 隔 小 竖 条 是 通过 输入 字符 “| ?实现 
的 ,由 于 分 隔 小 竖 条 是 页 面 的 装饰 ,而 并 非 是 页 面 的 内 容 , 可 以 应 用 CSS 
样式 实现 分 隔 小 竖 条 的 效果 。 其 方法 是 : 将 最 左 侧 的 小 竖 条 定义 为 ul 
的 左边 框 ,将 菜单 之 间 的 小 竖 条 定义 为 每 一 个 列表 项 fi 的 右边 框 。 


4. 利用 背景 图 像 制 作 立 体 导 航 菜单 
利用 背景 图 像 制 作 立 体 导航 菜单 的 HTML 代码 如 表 5-18 所 示 , 利 用 背景 图 像 制 作 











立体 导航 菜单 的 游览 效果 如 图 5-10 所 示 。 
表 5-18 利用 背景 图 像 制作 立体 导航 菜单 的 HTML 代码 
行 号 HTML 代码 
01 <ul id="top nav"> 
02 <li><a class= "nav" href="#" target=" blank"> 首 页 < /a></1li> 
03 <li><a class= "nav" href="#" target=" blank"> 国 内 游 </a>< /li> 
04 <li><a class= "nav" href="#" target=" blank"> 出 境 游 < /a>< /1i> 
05 <li><a class= "nav" href="#" target="” blank"> 城 市 旅游 < /a> < /1i> 
06 <li><a class= "nav" href="#" target="” blank"> 乡 村 旅游 < /a> < /1i> 
07 <1li><a class= "nav" href="#" target=" blank"> 周 边 游 </a></1i> 
08 <1i><a class= "nav" href="#" target=" blank"> 电 子 地 图 < /a>< /1i> 
09 </ul> 





首页 出 境 洲 城市 旅游 ”乡村 旅游 有 边 游 电子 地 图 





5-10 利用 背景 图 像 制 作 立 体 导航 菜单 的 浏览 效果 


利用 背景 图 像 制作 立体 导航 菜单 的 CSS 代码 如 表 5-19 所 示 。 
表 5-19 利用 背景 图 像 制作 立体 导航 菜单 的 CSS 代码 








行 号 CSS 代码 
01 #top nav li { 
02 line- height :25px; 
03 width:70px; 
04 height:25px; 
05 float: left; 
06 Imargin:0 5pX7 
07 1ist- style- type: none; 
08 text 一 align: center; 
09 
10 
对 a.nav:link,a.nav:visited { 
12 font- size: 13px; 
13 Color: #000; 
14 font- weight :bold; 
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续 表 

行 号 CSS 代码 

号 text- decoration: none; 

16 display: block; 

于 

18 #top nav { 

19 height:25px; 

20 margin- top: 5px; 

21 text- indent: 07 

22 

23 a.nav:hover { 

24 font- size: 13px7 

25 font- weight: bold; 

26 line- height: 25px; 

27 Color: #fff; 

28 text- decoration: none; 

29 background- image: Url (images/menubg01.jpg); 

30 background- repeat: repeat— x; 

31 display: block; 

32 width:70px; 

33 border- bottom: solid 2px #£99; 

34 } 


5. 实现 导航 栏 菜单 自动 伸缩 和 超 链 接 的 悬 停 交 换 效果 


导航 栏 菜单 的 宽度 根据 内 部 文字 不 同 而 自动 伸缩 的 CSS 代码 如 表 5-20 所 示 ,菜单 列 
表 项 li 向 左 浮动 ,右边 界 为 5px, 使 每 一 个 菜单 项 产生 水 平 间距 , 即 水 平 间 隔 为 5px。 超 
链接 标签 a 的 设置 是 形成 宽度 自动 伸缩 的 关键 ,将 标签 a 转换 为 块 状元 素 , 左 、 右 填充 设 
置 为 10px, 由 于 未 设置 宽度 只 定义 了 填充 ,标签 a 的 宽度 就 随 着 内 部 文字 的 多 少 而 变化 ， 
实际 宽度 等 于 文字 宽度 加 上 右 \ 右 填充 。 这 里 没有 设置 文字 水 平 居中 ,这 种 设置 方法 会 使 
文字 在 标签 a 内 水 平 居中 。 设 置 行 高 为 30px, 实 现 文字 垂直 居中 对 齐 。 


表 5-20 导航 栏 菜单 的 宽度 根据 内 部 文字 不 同 而 自动 伸缩 的 CSS 代码 

















行 号 CSS 代码 枝叶 CSS 代码 
01 |ul lif 11 |uliat 
02 float: left; 12 font- size: 12px; 
03 margin- right: 5px; 13 font— weight:bold; 
04 list- style- type: none; 14 Color: #fff; 
05 |} 15 line- height: 30px; 
06 |ul 1ia:hover { 16 text- decoration: none; 
07 color: #fff; 17 display:block; 
08 background: #3a650b; 18 padding- right: 10px; 
09 text— decoration: none; 19 padding- left: 10px; 
10 |} 28 | 


超 链接 标签 二 a 二 悬 停 状 态 的 CSS 样式 设置 为 : 颜色 变换 为 # fff, 背景 颜色 为 
#3a650b, 从 而 实现 超 链 接 的 悬 停 交换 效果 。 
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【问题 探究 】 


【问题 1】 网 页 中 链接 路 径 有 了 哪 几 种 表示 方法 ? 如 何 正确 书写 链接 路 径 ? 

要 保证 能 够 顺利 访问 所 链接 的 网 页 ,链接 路 径 必须 书写 正确 。 在 一 个 网 页 中 ,链接 路 
径 通常 有 三 种 表示 方法 : 绝对 路 径 文档 目录 相对 路 径 、 站 点 根 目 录 相 对 路 径 。 

1) 绝对 路 径 

绝对 路 径 是 所 链接 文档 的 完整 URL 路 径 ,包括 使 用 的 传输 协议 (对 于 浏览 网 页 而 言 
通常 是 http: //) ,例如 "http: //www. zjjvip. com” 即 是 一 个 绝对 路 径 。 绝 对 路 径 包 含 的 
是 具体 地 址 ,如果 目标 文件 被 移动 , 则 链接 无 效 。 

2) 文档 目录 相对 路 径 

文档 目录 相对 路 径 是 指 以 当前 文档 所 在 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 , 使 用 
文档 相对 路 径 可 省 去 当前 文档 和 被 链接 文档 的 绝对 路 径 中 相同 的 部 分 ,保留 不 同 部 分 。 

文档 目录 相对 路 径 适合 于 网 站 的 内 部 链接 。 只 要 是 属于 同一 网 站 之 下 ,即使 不 在 同 
一 个 文件 夹 中 ,文档 目录 相对 路 径 也 是 适合 的 。 

如 果 链 接 到 同一 文件 夹 中 网 页 文档 , 则 只 需 输入 要 链接 的 文档 名 称 ; 如 果 要 链接 到 下 
一 级 文件 夹 中 的 网 页 文档 , 先 输入 文件 夹 名 称 , 然 后 加 “/”, 再 输入 网 页 名 称 ;如 果 要 链接 
到 上 一 级 文件 夹 中 的 网 页 文档 , 则 先 输入 “. . /”, 再 输入 文件 夹 名 称 和 网 页 名 称 。 

当 使 用 文档 目录 相对 路 径 时 ,如 果 在 Dreamweaver CC 中 改变 了 某 个 网 页 文档 的 存 
放 位 置 ,不 需要 手工 修改 链接 路 径 ,Dreamweaver CC 会 自动 更 改 链接 。 

3) 站 点 根 目录 相对 路 径 

站 点 根 目 录 相 对 路 径 是 指 从 站 点 根 文件 夹 到 被 链接 文档 经 由 的 路 径 。 根 目录 相对 路 
径 也 适用 于 创建 内 部 链接 ,但 大 多 数 情况 下 ,一 般 不 使 用 这 种 路 径 形式 。 

【问题 2】 如 何 设置 CSS 链接 属性 ? 

1) 设置 链接 的 样式 

(1) 用 id 或 类 选择 符 对 标签 a 进行 定义 。 

(2) 将 标签 a 的 类 选择 符 与 伪 类 组 合 使 用 。 

2) 常见 的 链接 样式 

(1) 文本 修饰 

(2) 背景 色 

【问题 3】 网 页 导航 栏 有 何 作 用 ? 列举 几 种 常见 导航 栏 。 

导航 栏 是 网 站 中 不 可 缺少 的 元 素 之 一 , 它 不 仅 是 信息 内 容 的 基本 分 类 ,也 是 浏览 者 浏 
览 网 站 的 路 标 。 导 航 栏 是 引 人 注 目的 ,浏览 者 进入 网 站 ,首先 会 寻找 导航 栏 。 根 据 导航 菜 
单 , 直 观 地 了 解 网 站 中 包含 了 哪些 分 类 信息 以 及 分 类 方式 ,以 便 判 断 是 否 需要 进入 网 站 内 
部 查找 所 需 的 资料 。 

导航 栏 是 超 链 接 的 有 序 排列 。 导 航 栏 的 布局 方式 通常 分 为 横向 排列 、 纵 向 排列 、 弧 形 
排列 、 浮 动 导航 栏 等 多 种 形式 ;导航 栏 中 超 链接 的 载体 可 以 为 文字 、 图 片 .SWF 动画 、 按 钮 
等 ;导航 栏 也 可 做 成 弹出 式 菜单 形式 。 导 航 可 以 排列 在 页 面 的 上 方 、 左 侧 、 右 侧 、 底 部 ,有 
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的 网 站 将 导航 栏 置 于 页 面 的 中 部 位 置 。 

1) 横向 导航 栏 

横向 导航 栏 是 指导 航 条 目 横 向 排列 于 网 页 顶端 或 接近 顶端 位 置 的 导航 栏 ,有 的 横向 
导航 条 也 位 于 页 面 的 底部 。 对 于 信息 结构 复杂 、 导 航 菜单 数 多 的 网 站 ,可 以 选择 横向 多 排 
的 导航 栏 , 横 排 导航 栏 占用 很 少 的 页 面 空间 ,可 为 页 面 节省 出 更 多 空间 来 放置 信息 。 

2) 纵向 导航 栏 

纵向 导航 栏 是 指导 航 条 目 纵 向 排列 , 且 位 于 网 页 左 侧 或 右 侧 的 导航 栏 。 纵 向 导航 栏 
通常 会 占用 网 页 的 一 列 空间 ,页 面 下 半 部 分 的 信息 空间 减少 了 ,无 法 放下 更 多 的 内 容 在 
首 


冯 和 


3) 浮动 导航 栏 

浮动 导航 栏 是 指 没有 固定 位 置 ,浮动 于 网 页 内 容 之 上 的 导航 条 ,其 位 置 可 以 随意 移 
动 ,给 用 户 带 来 极 大 的 方便 。 

4) 下 拉 菜 单 式 导 航 栏 

下 拉 菜 单 式 导航 栏 与 Dreamweaver CC 的 主 界面 中 下 拉 菜 单 相似 ,由 若干 个 显示 在 
窗口 顶部 的 主 菜单 和 各 个 菜单 项 下 面 的 子 菜单 组 成 ,每 个 子 菜单 还 包括 几 个 子 菜单 项 。 
当 鼠 标 指针 指向 或 单 击 主 菜单 项 时 就 会 自动 弹出 一 个 下 拉 菜 单 , 当 鼠 标 指针 离开 主 菜单 
项 时 ,下 拉 菜 单 则 隐藏 起 来 , 回 到 只 显示 主 菜单 条 的 状态 。 这 种 形式 的 导航 栏 分 类 具体 、 
使 用 方便 占用 屏幕 空间 少 , 很 多 网 页 都 开始 使 用 这 种 形式 的 导航 栏 。 

【问题 4】 如 何 设计 CSS 导航 栏 ? 

拥有 易 用 的 导航 栏 对 于 任何 网 站 都 很 重要 ,通过 CSS 设置 ,能 够 把 乏味 的 HTML 菜 
单 转换 为 漂亮 的 导航 栏 。 导 航 栏 基本 上 是 一 个 链接 列表 ,因此 使 用 二 ul 之 和 <<li> 元 素 
是 非常 合适 的 。 

1) 垂直 导航 栏 

2) 水 平 导航 栏 

(1) 行内 列表 项 。 

(2) 对 列表 项 进行 浮动 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

三 ) 填空 题 

(四 ) 简 答 题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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表单 是 网 页 与 浏览 者 交互 的 一 种 界面 ,是 Web 站 点 的 访问 者 与 服务 器 进行 交互 的 工 
有 具 ,其 内 包含 了 人 允许 用 户 进行 交互 的 各 种 对 象 , 在 网 页 中 有 着 广泛 的 应 用 ,例如 在 线 注册 、 
在 线 购 物 ,在 线 调 查 问卷 等 ,这 些 过 程 都 需要 填写 一 系列 表单 ,然后 将 其 发 送 到 网 站 的 服 
务 器 ,并 由 服务 器 端的 应 用 程序 来 处 理 , 从 而 实现 与 浏览 者 的 交互 。 

表单 实现 了 浏览 器 和 服务 器 之 间 的 信息 传递 , 它 使 网 页 由 单 向 浏览 变 成 了 双向 交互 。 
这 里 以 申请 邮箱 为 例 简要 说 明 其 交互 原理 。 你 申请 邮箱 时 ,首先 在 表单 中 填写 个 人 信息 ， 
填写 完成 后 , 单 击 [ 提 交 了 按钮 ,这 些 信息 将 被 发 送 到 服务 器 ,服务 器 端 脚本 或 应 用 程序 对 
接收 的 表单 信息 进行 处 理 , 然 后 将 反馈 信息 发 送 回 用 户 , 例 如 “邮箱 申请 成 功 ” 的 信息 ,这 
样 就 实现 了 信息 交互 。 


【知识 必 备 】 


1. HTMLS 的 表单 及 控件 标签 


HTML5 的 表单 标签 如 表 6-1 所 示 。 
表 6-1 HTMLS 的 表单 标签 























标签 名 称 标签 描述 标签 名 称 标签 描述 
<form> 定义 供用 户 输入 的 HTML 表单 一 label> 定义 input 元素 的 标注 
=input> 定义 输入 控件 <fieldset> | 定义 围绕 表单 中 元 素 的 边框 
textarea> 定义 多 行 的 文本 输入 控件 <legend> 定义 fieldset 元 素 的 标题 
<button> 定义 按钮 到 datalist> | 定义 下 拉 列 表 
<select> 定义 选择 列表 (下 拉 列 表 ) 二 keygen> | 定义 生成 密 钥 
optgroup> 人 的 output> 定义 输出 的 一 些 类 型 
option> 定义 选择 列表 中 的 选项 














HTML5 的 表单 元 素 事件 (Form Element Events) 如 表 6-2 所 示 ,这 些 事件 仅 在 表单 
元 素 中 有 效 。 
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表 6-2 ”HTMLS 的 表单 元 素 事件 
属性 名 称 | 取 值 属性 描述 属性 名 称 | 取 值 属性 描述 
onchange | 脚本 | ” 当 元 素 改变 时 执行 脚本 onselect | 脚本 | 当 元 素 被 选取 时 执行 脚本 
onsubmit | 脚本 | ” 当 表 单 被 提交 时 执行 脚本 ”| onblur ”| 脚本 | 当 元 素 失去 焦点 时 执行 脚本 
onreset “| 脚本 | ” 当 表 单 被 重 置 时 执行 脚本 | onfocus | 脚本 | 当 元 素 获得 焦点 时 执行 脚本 





























1) 一 form> 标签 

二 form 记 标签 用 于 为 用 户 输 入 创建 HTML 表单 ,表单 用 于 向 服务 器 传输 数据 。 表 
单 能 够 包含 input 元 素 ,例如 文本 字段 , 复 选 框 . 单 选 框 【 提 交 】 按 钮 等 。 表单 还 可 以 包含 
menu textarea \fieldset legend 和 label 元 素 。 

表单 是 网 页 上 的 一 个 特定 区 域 , 这 个 区 域 是 由 一 对 过 form 盖 标签 定义 的 , 它 有 两 个 
方面 的 作用 : 一 是 限定 表单 范围 ,其 他 的 表单 对 象 都 可 以 插入 表单 之 中 , 单 击 【 提 交 了 按钮 
时 ,提交 的 也 是 表单 范围 之 内 的 内 容 ; 二 是 携带 表单 的 相关 信息 。 

HTML 表单 的 基本 语法 格式 如 下 : 


< form action= "search.jsp" method= "post" name= "search" id= "search" target= 
" blank"> 
< /form> 


参数 选项 说 明 如 下 : 

(1) action 属性 用 于 设置 处 理 表 单数 据 的 应 用 程序 文件 的 地 址 及 程序 名 称 , 也 可 以 
是 一 个 电子 邮件 地 址 ,采用 电子 邮件 方式 时 ,其 形式 为 action 二 "mailto: E-mail 地 址 ", 例 
如 mailto: abc@163. com。 

(2) method 属性 用 于 指定 表单 数据 发 送 到 服务 器 的 方式 ,主要 有 两 种 方式 : get 和 
post。 其 中 ,post 方式 将 数据 按照 HTTP 传输 协议 中 的 post 传输 方式 传送 到 服务 器 , 即 
把 表单 数据 髋 和 人 HTTP 请 求 中 传送 到 服务 器 。get 方式 将 数据 加 在 action 指定 的 地 址 后 
面 传送 到 服务 器 , 即 把 表单 数据 附加 到 URL 中 传送 。 

(3) name 属性 用 于 设置 表单 的 名 称 ,方便 对 表单 元 素 值 的 引用 。 

(4) id 属性 用 于 设置 表单 的 id 标识 ,方便 对 表单 样式 的 设置 和 表单 内 数据 值 的 
引用 。 

(5) target 属性 用 来 设置 表单 被 处 理 后 ,反馈 网 页 打开 的 方式 , 它 有 四 个 选项 ,分 别 
为 : ”blank” 表 示 在 一 个 新 浏览 窗口 中 打开 ;” parent” 表 示 在 父 窗口 中 打开 ,如 果 不 存在 
父 窗口 ,等 价 于 ”self”;” self" 表 示 在 当前 浏览 窗口 中 打开 ;”_top” 表 示 在 顶层 浏览 器 窗 
口中 打开 ,如 果 不 存在 顶层 浏览 器 窗口 , 则 在 当前 浏览 器 窗口 中 打开 ,等 价 于 ”self”。 默 
认 的 打开 方式 是 在 当前 浏览 器 窗口 中 打开 。 

2) 二 input 二 标签 

过 input 二 标签 用 于 搜集 用 户 信息 ,是 表单 中 最 常用 的 标签 之 一 ,表单 中 使 用 <input 二 
标签 插 人 输入 控件 ,常用 的 文本 框 、 按 钮 等 都 使 用 这 个 标签 ,通过 type 属性 识别 域 的 类 
型 ,text 表示 文本 框 ,radio 表示 单 选 按钮 ,checkbox 表示 复 选 框 ,submit 表示 提交 按钮 ， 
reset 表示 重 置 按钮 ,image 表示 图 像 域 。 
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单行 文本 框 的 示例 代码 如 下 : 


< input type="text" name="username"” id="username"” value=" 请 输入 用 户 名 " size= 
"20" maxlength= "30" align="left"/> 


密码 输入 框 的 示例 代码 如 下 : 


< input type ="password" name =" keyword" id="keyword" value=" 请 输入 密码 " size= 
"10" maxlength="15" align="left"/> 


单 选 按 钮 的 示例 代码 如 下 : 
< input type= "radio" name= "sex" id= "sex" value= "men" checked= "checked"/> 男 
复 选 框 的 示例 代码 如 下 : 


< input type=" checkbox" name =" interest" id=" interest" value=" tour" checked= 
"checked" /> 旅游 


提交 按钮 的 示例 代码 如 下 : 

<input type= "submit" name= "submit btn" id= "submit btn" value= "提交"/> 
重 置 按钮 的 示例 代码 如 下 : 

< input type= "reset" name= "reset_btn" id="reset btn" value=" 重 置 "/> 
图 像 域 的 示例 代码 如 下 : 


< input type= "image" src= "images/search btn.jpg" name= "search btn" id= "search btn" align 

="right"/> 

以 上 各 主要 输入 控件 的 示例 代码 列举 了 表单 输入 控件 的 常用 属性 的 使 用 方法 ,各 个 
主要 属性 的 说 明 如 下 : 

(1) type 属性 用 于 定义 输入 控件 的 类 型 ,type 二 "text" 表 示 单 行文 本 框 ,type= 
"password" 表 示 密 码 输入 框 ,type 二 "radio" 表 示 单 选 按钮 ,type 二 "checkbox" 表 示 复 
选 框 ,type="submit" 表 示 提 交 按 钮 ,type= "reset" 表 示 重 置 按钮 ,type 一 "image" 表 示 
图 像 域 ,type= "file" 表 示 文 件 域 ,type="hidden" 表 示 隐 藏 域 ,type="button" 表 示 普 
通 按钮 。 

(2) name 属性 用 于 定义 控件 名 称 ,id 属性 用 于 定义 控件 的 id 标识 。 

(3) value 属性 用 于 定义 控件 的 默认 值 或 初始 值 。 当 没有 输入 值 或 选择 值 时 ,使 用 该 
默认 值 。 

(4) align 属性 用 于 设置 控件 的 对 齐 方式 ,其 取 值 包括 left ,right top .bottom 和 
middle。 

(5) checked 属性 用 于 设置 控件 默认 被 选中 的 项 。 

(6) size 属性 用 于 定义 单行 文本 框 允许 输入 字符 的 个 数 ,与 设置 其 width 属性 的 功能 
相似 。maxlength 属性 用 于 单行 文本 框 最 多 可 以 输入 的 字符 个 数 。 

(7) src 属性 用 于 设置 图 像 文 件 地 址 。 
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(8) disabled 属性 用 于 设置 控件 禁用 ,readonly 属性 用 于 设置 文本 框 为 只 读 。 

(9) alt 属性 用 于 设置 控件 的 描述 信息 。 

(10) tabindex 属性 用 于 设置 不 同 控件 之 间 获 得 焦点 的 先后 顺序 , 取 值 为 正 整数 。 

另外 ,accept 属性 用 于 允许 上 传 的 文件 类 型 。onclick 属性 用 于 定义 单 击 时 将 触发 的 
事件 ,onselect 属性 用 于 定义 当前 控件 被 选中 时 将 触发 的 事件 ,onfocus 属性 用 于 定义 当 
控件 获得 焦点 时 所 触发 的 事件 ,onblur 属性 用 于 定义 当 控 件 失 去 焦点 时 所 触发 的 事件 ， 
onchang 属性 用 于 定义 当 控 件 内 容 改变 时 所 触发 的 事件 。 

3) 二 label 二 标签 

二 label 二 标签 为 input 元 素 定义 标注 (标记 ) ,label 元 素 不 会 向 用 户 呈 现任 何 特殊 效 
果 。 不 过 , 它 为 鼠标 用 户 改 进 了 可 用 性 ,为 页 面 上 的 其 他 元 素 指定 提示 信息 。 如 果 在 
label 元 素 内 单 击 文本 ,就 会 触发 此 控件 。 就 是 说 , 当 用 户 选择 该 标签 时 ,浏览 器 就 会 自动 
将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 

要 将 label 元 素 绑 定 到 其 他 的 表单 控件 上 ,可 以 将 label 元 素 的 for 属性 设置 为 该 控 
件 的 id 属性 值 相 同 ,而 将 label 元 素 的 for 属性 设置 为 该 控件 的 name 属性 值 则 无 效 。 

4) 一 select 二 标签 

表单 中 使 用 二 select 二 标签 插入 一 个 选择 ,二 select 二 标签 要 与 二 option 二 标签 联合 使 
用 ,每 个 选项 都 要 使 用 二 option 二 标签 来 定义 。 

选择 的 示例 代码 如 下 : 





<select name= "yearl" size="3" multiple id="yearl"> 
<option value= "2018" selected> 2018< /option> 
<option value= "2019"> 2019< /option> 
< option value= "2020"> 2020< /option> 


</select> 


选择 控件 有 些 属 性 与 输入 控件 的 属性 类 似 , 其 常用 属性 主要 如 下 : 

(1) name 属性 用 于 定义 选择 的 名 称 。id 属性 用 于 定义 选择 的 id 标识 。 

(2) selected 属性 用 于 定义 当前 项 为 默认 选中 项 。 

(3) size 属性 用 于 定义 列表 框 的 高 度 , 即 显示 几 个 列表 项 。 默 认 值 为 1 。 

(4) multiple 属性 用 于 定义 列表 框 是 否 可 以 多 选 。 

5) 二 button 二 标签 

二 button 志 标签 定义 一 个 按钮 ,在 button 元 素 内 部 ,可 以 放置 文本 或 图 像 等 内 容 , 这 
是 该 元 素 与 使 用 input 元 素 创建 的 按钮 之 间 的 不 同 之 处 。 

过 button 二 控件 与 二 input type= "button" 二 相 比 ,提供 了 更 为 强大 的 功能 和 更 丰富 
的 内 容 。 所 button> 与 二 /button 过 标签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 , 其 中 包括 任 
何 可 接受 的 文本 或 多 媒体 等 多 种 形式 的 正文 内 容 。 例 如 ,可 以 在 button 元 素 中 包括 一 
个 图 像 和 相关 的 文本 ,用 它们 在 按钮 中 创建 一 个 吸引 人 的 标记 图 像 。 在 button 元 素 中 
唯一 禁止 使 用 的 元 素 是 图 像 映 射 ,因为 它 对 鼠标 和 键盘 敏感 的 动作 会 干扰 表单 按钮 的 
行为 。 

所 有 主流 浏览 器 都 支持 二 button 之 标签 ,使 用 button 按钮 时 应 为 其 规定 type 属性 ， 
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下 浏览 器 的 默认 类 型 是 "button", 而 其 他 浏览 器 中 (包括 W3C 规范 ) 的 默认 值 是 
"submit"。HTML5 中 button 元 素 的 新 属性 如 表 6-3 所 示 。 


表 6-3 HTML5 中 button 元 素 的 新 属性 

















属 性 | 取 值 的 可 选项 属性 描述 
autofocus autofocus 规定 当 页 面 加 载 时 按钮 应 当 自动 地 获得 焦点 
disabled disabled 规定 应 该 禁用 该 按钮 
form form_name 规定 按钮 属于 一 个 或 多 个 表单 
formaction url 覆盖 form 元 素 的 action 属性 ,该 属性 与 type 二 "submit" 配 合 使 用 
formmethod |get.post 覆盖 form 元 素 的 method 属性 ,该 属性 与 type= "submit" 配 合 使 用 





formnovalidate 


formnovalidate 


覆盖 form 元 素 的 novalidate 属性 ,该 属性 与 type= 二 "submit" 配 合 
使 用 











_blank、_self、 

formtarget _parent、top、| 覆盖 form 元 素 的 target 属性 ,该 属性 与 type 二 "submit" 配 合 使 用 
framename 

name button_name 规定 按钮 的 名 称 

be buttonreset 规定 按钮 的 类 型 
submit 





value 





text 





规定 按钮 的 初始 值 ,可 由 脚本 代码 进行 修改 


如 果 在 HTML 表单 中 使 用 button 元 素 , 不 同 的 浏览 器 会 提交 不 同 的 值 。Internet 
Explorer 将 提交 二 button 二 与 二 /button 二 之 间 的 文本 ,而 其 他 浏览 器 将 提交 value 属性 


的 内 容 。 


6) 二 textarea 二 标签 
< 一 textarea 二 标签 定义 多 行 的 文本 输入 控件 ,表单 中 使 用 二 textarea 二 一 /textarea 二 
标签 插入 文本 区 域 , 这 是 一 个 建立 多 行文 本 输入 框 的 专用 标签 。 文 本 区 域 中 可 容纳 无 限 
数量 的 文本 ,其 中 文本 的 默认 字体 是 等 宽 字体 (通常 是 Courier) 。 可 以 通过 cols 和 rows 
属性 来 规定 textarea 的 尺寸 ,不 过 更 好 的 办 法 是 使 用 CSS 的 height 和 width 属性 进行 


设置 。 


文本 区 域 的 示例 代码 如 下 : 
< textarea name= "suggest" id= "suggest" cols= "30" rows= "5"> 请 提 建 议 < /textarea> 


文本 区 域 控件 有 些 属性 与 输入 控件 的 属性 类 似 , 其 常用 属性 主要 有 : 

(1) name 属性 用 于 定义 文本 区 域 控件 的 名 称 。 

(2) id 属性 用 于 定义 文本 区 域 控 件 的 id 标识 。 

(3) cols 属性 用 于 定义 文本 区 域 控件 的 宽度 ,以 字符 为 单位 。 

(4) rows 属性 用 于 定义 文本 区 域 的 高 度 , 即 行 数 。 

7) 二 fieldset 二 标签 和 二 legend 标 签 

二 fieldset 二 标签 将 表单 内 的 相关 元 素 分 组 , 当 一 组 表单 元 素 放 到 一 fieldset 二 标签 内 
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时 ,浏览 器 会 以 特殊 方式 来 显示 它们 ,它们 可 能 有 特殊 的 边界 .3D 效果 ,或 者 可 创建 一 个 
子 表单 来 处 理 这 些 元 素 。 一 fieldset 盖 一 /fieldset 二 标签 可 以 岩 套 使 用 。 

一 legend> 二 /legend 盖 标签 作为 二 fieldset 之 二 /fieldset 二 标签 内 的 第 一 个 元 素 , 用 
于 在 fieldset 元 素 内 设置 一 个 分 组 标题 。 

< 一 fieldset 二 二 /fieldset 过 标签 与 二 legend 二 二 /legend 二 标签 都 是 块 状 元 素 。 
使 用 二 fieldset 二 过 /fieldset 二 标签 对 表单 控件 进行 分 组 ,并 使 用 二 legend 二 /legend> 
标签 为 分 组 添加 合适 的 标题 ,这 样 做 有 利于 提高 视觉 效果 ,加 快 用 户 的 操作 速度 ,达到 事 
半 功 倍 的 效果 。 








2. HTMLS 新 的 form 属性 


1) autocomplete 属性 

autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。autocomplete 适用 
于 二 form 二 标签 以 及 以 下 类 型 的 二 input 二 标签 : text, search、 url、 telephone、 email、 
password、datepickers、range 以 及 color。 当 用 户 在 自动 完成 域 中 开始 输入 时 ,浏览 器 应 
该 在 该 域 中 显示 填写 的 选项 。 示 例 代 码 如 下 : 





< form action= "demo form.asp" method= "get" autocomplete= "on"> 
First name: <input type= "text" name= "fname"/><br/> 
Last name: <input type= "text" name="lname"/><br/> 
E-mail: <input type= "email" name= "email" autocomplete= "off"/><br/> 
<input type= "submit"/> 
< /form> 
2) novalidate 属性 
novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。novalidate 属性 适 
用 于 二 form 过 以 及 以 下 类 型 的 二 input 二 标签 : text、 search、 url、 telephone、 email、 
password date pickers ,range 以 及 color。 示 例 代码 如 下 : 


< form action= "demo form.asp" method= "get" novalidate= "true"> 
E-mail: <input type= "email" name= "user email"/> 
<input type= "submit"/> 


< /fom> 


3. 表单 的 id 和 name 属性 的 说 明 


表单 中 id 与 name 都 是 为 了 标记 对 象 名 称 。id 是 后 来 引入 的 ,在 这 之 前 Netscape 使 

用 name 属性 来 标记 对 象 。 目 前 很 多 网 站 后 台 程 序 都 是 通过 name 属性 来 获取 表单 元 素 

的 值 ,所 以 有 必要 同时 包括 id 和 name 标记 ,这 样 不 但 考虑 到 页 面 表现 的 CSS 样式 定义 ， 
还 可 以 兼顾 到 表单 接收 页 面 能 正确 地 获取 表单 元 素 的 值 。 
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【引导 训练 】 
任务 6-1 在 网 页 中 添加 表单 及 表单 控件 


【任务 描述 】 


创建 网 页 0601. html, 在 该 网 页 中 添加 表单 以 及 文本 框 、 按 钮 控件 。 

(1) 为 表单 的 action .method name \id ,target 等 属性 设置 不 同 的 属性 值 。 
(2) 尝试 设置 文本 框 控件 的 type .name、value .align size 等 属性 。 

(3) 尝试 设置 按钮 控件 的 name、type、value 等 属性 。 


【任务 吝 施 】 


1. 创建 所 需 的 文件 夹 和 复制 所 需 的 资源 

在 文件 夹 *HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit06 ,然后 在 该 文件 来 
中 创建 子 文件 夹 0601 ,再 在 该 子 文件 夹 0601 中 创建 css .images 子 文件 夹 , 且 将 所 需 的 素 
材 复制 到 对 应 的 子 文件 夹 中 。 


2. 启动 Dreamweaver CC 
使 用 Windows 的 [开始 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 创建 本 地 站 点 和 网 页 


创建 1 个 名 称 为 “单元 6” 的 本 地 站 点 ,站 点 文件 夹 为 Unit06。 在 该 站 点 的 文件 夹 
0601 中 创建 网 页 0601. html。 


4. 插入 表单 域 及 其 属性 设置 


每 个 表单 由 1 个 表单 域 和 若干 个 表单 控件 组 成 ,所 有 的 表单 控件 要 放置 在 表单 域 中 
才 会 有 效 ,因此 ,制作 表单 页 面 的 第 一 步 是 插入 表单 域 。 

(1) 打开 光标 置 于 网 页 文档 0601. html 中 。 

(2) 在 Dreamweaver CC 主 界面 中 ,选择 【插入 】>【 表 单 】>【 表 单 ] 命 令 ,如 图 6-1 
所 示 。 

在 网 页 0601. html 中 光标 处 插入 1 个 表单 域 ,切换 到 “代码 "编辑 区 域 ,查看 生成 的 
HTML 代码 如 下 : 


< form id= "forml" name= "forml" method= "post"> </form> 


1 个 表单 域 插入 网 页 中 ,在 编辑 窗口 中 显示 为 1 个 红色 虚线 框 ,其 他 的 表单 对 象 必须 
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Secion | 
Footer 文本 
HTML > 电子 部 件 (M) 

密码 (P) 
Bootstrap 组 件 (B) > UU) 
jQvery Mobileg) >| Ton 
jQuery UI > 搜索 (E) 
自 定 义 收藏 赤 (C) a 

9) 

模板 人 > 顾 色 (QO 
最 近 的 代码 片断 (R) > 月 (H) 


6-1 【表单 菜单 


放 和 这 个 框 内 才能 起 作用 。 如 果 看 不 见 插入 页 面 中 的 标记 表单 域 的 红色 虚线 区 域 , 则 可 
以 选择 [查看 >【 设 计 视图 选项 【可 视 化 助理 ]>【 不 可 见 元 素 ] 命 令 , 选 中 菜单 项 [不 可 
见 元 素 】 ,使 红色 虚线 可 见 ,如 图 6-2 所 示 。 





人 BO 

拆 分 G) 》 

查看 模式 (M) ， 

1 机 四) CutAltt 

SBD) 

#0) Alt+Shif+F11 

i 计 视 图) 后 

HR 有 Cosshiftl 

相关 文件 R) ， 。 梯 X 旦 现 () Css 布局 本 (8) 

相关 文件 迁 项 (0) 2 ， 国 <ss BEsa 
RsaeM) 。 ， 国 css aayHEO) 
mso).. ， 国 sssmew 
ED  ， 国 wan 
过 故宫 > | 国 aaemo 
标 RIR) ， 











图 6-2 【可 视 化 助理 菜单 


将 光标 管 于 表单 域 中 , 即 可 看 到 表单 域 的 [属性 3 面板 ,在 表单 域 的 [属性 ] 面 板 中 设置 
表单 域 的 属性 。 在 ID 文本 框 中 输入 forml, 在 Method 列表 框 中 选择 GET, 在 Enctype 
列表 框 中 选择 application/x-www-form-urlencoded, 在 Target 列表 框 中 选择 ”blank”, 表 
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图 6-3 表单 域 的 属性 了 面板 


表单 域 的 [属性 了 面板 上 各 项 属性 的 设置 如 下 。 

(1) ID: 用 来 设置 表单 的 名 称 , 为 了 能 正确 处 理 表单 ,要 给 表单 设置 1 个 便于 识别 的 
名 称 。 以 便服 务 器 在 处 理 数据 时 能 够 准确 地 识别 表单 。 这 里 设置 为 forml 。 

(2) Action: 用 来 设置 处 理 该 表单 的 动态 网 页 或 用 来 处 理 表单 数据 的 程序 路 径 与 名 
称 ,这 里 假设 处 理 该 表单 的 动态 网 页 为 register_confirm. aspx。 如 果 和 希望 该 表单 通过 E- 
mail 方式 发 送 , 则 可 以 输入 *mailto: E-mail 地 址 ”, 例 如 mailto: abc@163. com, 当 浏览 者 
单 击 “ 提 交 ” 按 钮 时 ,浏览 器 会 自动 调用 默认 使 用 的 邮件 客户 端 程序 将 表单 内 容 发 送 到 指 
定 的 电子 邮箱 中 。 

(3) Target: 用 来 设置 表单 被 处 理 后 ,反馈 网 页 打开 的 方式 , 它 有 多 个 选项 ,分 别 为 
“_blank”( 表 示 网 页 在 新 窗口 中 打开 )、“_parent”( 表 示 网 页 在 父 窗 口中 打开 )、“_self”( 表 
示 网 页 在 原 窗口 中 打开 )、“_top”( 表 示 网 页 在 顶层 窗口 中 打开 )。 默 认 的 打开 方式 是 在 原 
窗口 中 打开 ,这 里 设置 “目标 ”为 *_blank”, 有 利于 提高 浏览 速度 。 

(4) Method: 用 来 设置 表单 数据 发 送 到 服务 器 的 方式 ,有 三 个 选项 , 即 “ 默 认 ”、GET 
和 POST。 如 果 选 择 * 默 认 ? 或 GET, 则 将 以 GET 方式 发 送 表单 数据 ,把 表单 数据 附加 到 
请 求 URL 中 发 送 ; 如 果 选 择 POST, 则 将 以 POST 方式 发 送 表单 数据 ,把 表单 数据 嵌入 
HTTP 请 求 中 发 送 。 一 般 情 况 下 选择 POST 方式 。 这 里 选择 POST 方式 。 

(5) Enctype: 用 来 设置 发 送 数据 的 MIME 编码 类 型 ,有 2 个 选项 , 即 application/x- 
www-form-urlencoded 和 multipart/form-data, 上 默认 的 MIME 编码 类 型 是 application/x- 
www-form-urlencoded, 该 类 型 通常 与 POST 方式 协同 使 用 。 如 果 表 单 中 包含 文件 上 传 
域 , 则 应 该 选择 multipart/form-data 编码 类 型 。 

(6) Class: 可 以 选择 已 定义 的 样式 应 用 于 该 表单 。 

表单 部 分 属性 设置 完成 后 的 HTML 代码 如 下 : 


< form method= "get" enctype= "application/x- www- form- urlencoded" name= "forml" target="_ 
blank" id="forml"> </fom> 


(7) 保存 网 页 ,预览 其 效果 。 
5. 插入 文本 框 控件 与 设置 其 属性 


在 表单 的 文本 框 中 ,可 以 输入 文本 数字 或 字母 。 输 入 的 内 容 可 以 单行 显示 ,也 可 以 
多 行 显示 ,还 可 以 将 密码 以 星 号 形式 显示 。 

1) 搬入 文本 框 控件 

在 网 页 的 【设计 了 窗口 将 光标 置 于 表单 区 域内 , 单 击 【 插 入 了 面板 的 【表单 3 工具 栏 中 的 
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【文本 3 按钮 ,如 图 6-4 所 示 。 于 是 ,在 光标 位 置 插入 1 个 文本 框 , 对 应 的 HTML 代码 
如 下 : 





<label for="textfield"> Text Field:< /label> 
< input type= "text" name= "textfield" id= "textfield"> 





图 6-4 【插入 面板 的 [表单] 工具 栏 按钮 


这 里 不 需要 使 用 二 label 二 过 /label 二 控制 ,将 对 应 的 HTML 代码 删除 即 可 。 

2) 设置 文本 框 的 属性 

选中 插入 的 文本 框 , 在 其 [属性 了 面板 中 设置 文本 框 的 属性 ,在 Name 文本 框 中 输 
入 key, 在 Size 文 本 框 中 输入 28 ,设置 文本 框 中 能 显示 14 个 汉字 (28 字 节 的 长 度 ); 
在 MaxLength 文本 框 中 输入 40 ,设置 文本 框 最 多 能 输入 20 个 汉字 (40 字 节 的 长 
度 ); 在 Place Holder 文本 框 中 输入 “请 输入 目的 地 ”。 文 本 框 的 属性 设置 结果 如 
图 6-5 所 示 。 





6-5 文本 框 的 属性 设置 


文本 框 的 部 分 属性 设置 完成 后 对 应 的 HTML 代码 如 下 : 


< :input name= "key" type= "text" id= "key" placeholder= "请 输入 目的 地 "size= "28" maxlength 
="40"> 


(1) 文本 框 标签 。 


< input name= "namel" type= "text" class= "style3" id= "namel" value= "请 输入 您 的 姓名 " 
size= "16" maxlength= "20" style= "font- size:14px; font- family: "楷体 _GB2312';" 
‘onMouseOver= "this .focus ()"” onFocus= "this.select ()"/> 


(2) 单 选 按钮 标签 。 


< input name= "radiol" type= "radio" class= "style3" id= "men" value= "men"/> 
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(3) 复 选 框 标签 。 
< input name= "item01" type= "checkbox" id= "item01" value= "checkbox01"/> 
(4) 提交 按钮 标签 。 


< input name= "submitl" type= "submit" class= "style2" id= "submitl" value= "提交 " onclick=" 
checkInput () "/> 


(5) 重 置 按钮 标签 。 
< input type= "reset" name= "reset" id= "button" value=" 重 置 "/> 


3) 保存 网 页 ,预览 其 效果 
保存 网 页 后 ,用 浏览 器 预览 效果 ,检查 是 否 符合 要 求 。 


6. 插入 普通 按钮 与 设置 其 属性 


1) 插入 普通 按钮 
将 光标 置 于 表单 中 已 插入 的 文本 框 右 侧 , 单 击 【插入 了 面板 的 表单】 工具 栏 中 的 【 按 
钮 ] 按 钮 ,在 光标 处 插入 1 个 普通 按钮 ,对 应 的 HTML 代码 如 下 : 


< input type= "button" name= "button" id= "button" value= "提交 "> 


2) 设置 按钮 的 属性 

选中 表单 域 中 所 插入 的 按钮 ,在 Button 的 【属性 面板 中 设置 其 属性 ;在 Name 文本 
框 中 输入 btnClose; 在 Value 文本 框 中 输入 “搜索 ”, 使 按钮 上 显示 的 文字 为 “搜索 ”; 在 
Title 文本 框 中 输入 “请 单 击 按钮 ;在 “类 ”列表 框 中 选择 buttonGray, 属性 设置 结果 如 
图 6-6 所 示 。 





6-6 【关闭 ] 按 钮 的 属性 设置 


按钮 的 部 分 属性 设置 完成 后 对 应 的 HTML 代码 如 下 : 


< input name= "btnClose" type= "button" class= "buttonGray" id= "btnClose" 


title= "请 单 击 按钮 " value= "搜索 "> 


3) 保存 网 页 ,预览 其 效果 
保存 网 页 后 ,用 浏览 器 预览 效果 ,检查 是 否 符合 要 求 。 


7. 定义 CSS 代码 
网 页 通用 的 CSS 定义 代码 如 表 6-4 所 示 。 
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表 6-4 网 页 0601. html 中 通用 的 CSS 代码 定义 





序号 CSS 代码 
01 input [type= "text'] { 
02 border: lpx solid #CCC; 
03 cursor: text; 
04 line- height: 30px; 
05 height: 30px; 
06 padding: 0 2px; 
07 margin- right: 3px; 
08 border- radius: 3px; 
09 font- size: 14px; 
10 outline: none; 
11 background- image: 
12 Url (../images/travel- ico.png); 
| background- repeat: no- repeat; 
14 background- position: -32px — 46px; 
息 padding- left: 30px; 
16 } 
下 input [type= 'text'] :focus { 
18 box- shadow: 0 0 6px rgba (25,161,219, .4); 
19 } 
20 input [type= 'button'] { 
21 font- weight: bold; 
22 font- size: 12px; 
23 Color: #666; 
24 white- space: nowrap; 
25 position: relative; 
26 border- radius: 3px; 
2 cursor: pointer; 
28 overflow: visible; 
29 height: 30px; 
30 line- height: 26px; 
错 padding: 2px 10px; 
32 margin- left: ~ 6px; 
33 border: 1px solid #CCC; 
34 } 
35 
36 input [type= "button'] :hover { 
37 transition: all 2s; 
38 } 





网 页 主体 结构 及 表单 的 CSS 定义 代码 如 表 6-5 所 示 。 
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表 6-5 网 页 0601. html 中 主体 结构 及 表单 的 CSS 代码 定义 








序号 CSS 代码 
01 .nav—-menu { 
02 position: absolute; 
03 top: 20px; 
04 right: 20px; 
05 width: auto; 
06 z-index: 2; 
07 text— align: right; 
08 height: 20px; 
09 line- height: 20px; 
10 font- size: 14px; 
11 } 
12 
13 :Ww- search { 
14 white- space: nowrap; 
15 } 
16 .nav-menu form >i { 
17 margin- left: 0.5em; 
18 } 
3 
2 buttonGray { 
ey background: linear- gradient (top, #FFF, #EEE); 
22 border: lpx solid #DDD; 
23 padding: 2px 5px; 
24 text- shadow: rgba(255, 255, 255, 0.7) 0 -lpx 0; 
25 min- width: 40px; 
26 } 
27 
28 buttonGray:hover { 
29 background: linear- gradient (top, #EEE, #FFF); 
30 } 


8. 保存 与 浏览 网 页 


保存 网 页 0601. html, 其 浏览 效果 如 图 6-7 所 示 。 
然后 按照 任务 描述 的 要 求 不 断 改变 超 链 接 的 各 个 
属性 设置 ,重新 浏览 其 效果 。 


请 输入 目的 地 搜索 


6-7 ”网 页 0601. html 的 浏览 效果 





任务 6-2 创建 用 户 注册 的 表单 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
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及 其 属性 。 

(2) 创建 网 页 文档 0602. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0602. html 中 添加 必要 的 HTML 标签 和 插入 表单 及 表单 控件 。 

(4) 浏览 网 页 0602. html 的 效果 ,如 图 6-8 所 示 ,该 网 页 包含 表单 以 及 多 个 表单 控件 ， 
用 于 实现 用 户 注册 功能 。 





用 户 注册 


图 FFF © WEY 





国 OW NE 


图 6-8 网 页 0602. html 的 浏览 效果 











【任务 吝 邦 】 


1. 创建 所 需 的 文件 夹 与 复制 所 需 的 资源 
在 文件 夹 Unit06 中 创建 子 文件 夹 0602, 再 在 该 子 文件 夹 中 创建 css、images 等 子 文 
件 夹 , 且 将 所 需 的 素材 复制 到 对 应 的 子 文件 夹 中 。 
2. 定义 CSS 代码 
在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 6-6 
所 示 。 
表 6-6 网 页 0602. html 中 主 样式 文件 base. css 的 CSS 代码 





序号 CSS 代码 
01 body, input { 
02 Color: #666; 
03 font- size: 12px; 
04 letter- spacing: Opx; 
05 white- space: normal; 
06 font- family: Tahoma, "宋体 "; 








165 


HTML5+ CSS3 跨 平 台 网 页 设计 实例 教程 








续 表 
序号 CSS 代码 
07 
08 
09 img,ol,ul,1, form, label, legend { 
10 margin: 07 
11 padding: 0; 
12 border: none; 
时 和 
14 
15 p,dl,dt,d,button,form { 
16 word- break: break- all; 
7 word- wrap: break- word; 
18 } 
19 
20 ul,li,dl,dt,ad { 
a list- style- type: none; 
22 list- style- position: outside; 
23 text- indent: 0; 
24 } 
2 
2 a:link,a:visited { 
2 text- decoration: none; 
28 Color: #666; 
29 } 
30 
31 a:hover { 
32 Color: #2b98db; 
33 } 
34 input [type= 'text '] ,input [type= 'password'] { 
35 border: 1px solid #CCC; 
36 Cursor: text; 
37 line- height: 30px; 
38 height: 30px; 
39 padding: 0 2px; 
40 margin- right: 3px; 
41 border- radius: 3px; 
2 background- repeat: no- repeat; 
43 font- size: 14px; 
44 } 
45 
46 input [type= 'text'] :focus, input [type= "password'] :focus { 
47 box- shadow: 0 0 6px rgba (25,161,219, .4) 
48 } 
49 input [type= "submit"] { 
50 background: linear- gradient (# fe9e5Se, #ea7201); 
51 border: 1px solid #ea72017 
52 Color: #FFF; 
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续 表 

序号 CSS 代码 

53 font- weight: bold; 

54 padding: 8px 15px; 

55 font- size: 16px; 

56 position: relative; 

57 border- radius: 3px; 

58 min- width: 100px; 

59 Cursor: pointer; 

60 Overflow: visible; 

61 

62 input [type= 'submit'] :hover { 

63 background: linear- gradient (#ea7201, #fe9e5Se); 

64 background: # fe9eSe\0; 

65 transition: all 2s; 

66 } 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 0602. 
E 体 布局 结构 的 CSS 代码 如 表 6-7 所 示 。 


表 6-7 网 页 0602. html 中 主 样式 文件 main. css 的 CSS 代码 











序号 CSS 代码 序号 CSS 代码 
01 | .ec-s-Ireg { 26 padding- top: 5px7 
02 margin- left: 20px; 27 Padding- bottom: Spx; 
63 |¥ 28 margin: 0 auto; 
04 29 line- height: 40px; 
05 | .ec-s-reg>h21{ 30 position: relative; 
06 padding: 10px 20px; 31 color: #666; 
07 font- size: 16px; 2 clear: both; 
08 font- family: "微软 雅 黑 "; 33 |} 
09 padding- left: 300px; 34 | .fom-mli .info { 
10 |} 35 padding- left: 111px7 
好 36 Position: relative; 
h 4 .ec-s-reg>.w-mf{ 37 |} 
堆 box- shadow: 0 0 5px #EEE; 38 
14 border- radius: 3px; 39 | .form-m1i label { 
站 border: 1px solid #EEE; 40 margin- right: Spx; 
16 pagdding: 5px; 41 font- size: 14px; 
17 width: 660px; 42 display: inline-block; 
18 |} 43 * display: inline; 
19 44 width: 100px; 
20 | .ec-s-reg .form-m{ 45 text- aligon: right; 
21 padding- top: 10px; 46 white- space: nowrap; 
22 margin: auto; 47 Color: #333; 
23 | 48 |} 
24 49 
25 .form-m1it{ 50 .form-m 1i i.radiolabel label { 
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续 表 

序号 CSS 代码 序号 CSS 代码 

51 width: auto; 59 -form-m 1i.btnSubmit { 

52 font-weight: normal 60 Padding: 5px 0 5px 107px; 

53 |} 61 clear: both; 

54 62 text- align: left; 

5 .fom-m li.info, .fom-m li.binSubmit { 63 

56 pagdding- left: 110px; 64 | .inputMsg { 

57 ||¥ 65 Color: #999; 

58 66 |} 














3. 创建 网 页 文档 0602. html 与 链接 外 部 样式 表 


在 文件 夹 0602 中 创建 网 页 文档 0602. html, 切 换 到 网 页 文档 0602. html 的 【代码 了 视 
图 ,在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 样式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/base.css"/> 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 


4. 在 网 页 0602. html 中 添加 必要 的 HTML 标签 与 输入 文本 内 容 
在 网 页 文档 0602. html 中 添加 必要 的 HTML 标签 ,主体 布局 的 HTML 代码 如 





表 6-8 所 示 。 
表 6-8 网 页 0602. html 的 主体 布局 的 HTML 代码 
序号 HTML 代码 
01 <section class= "ec- s- reg"> 
02 <h2> 用 户 注册 < /h2> 
03 <div class="w-m"> 
04 <ul> 
05 <1i> </li> 
06 <1i class="userInfo"> Hiis 
07 <1i> </Jli> 
08 <1i class="" id= "mobileCode"> </li> 
09 <1i> </li> 
10 <1i> </li> 
起 <1i class= "btnSubmit"> </li> 
12 <1i class= "btnSubmit"> </li> 
13 </ul> 
14 </div> 
15 </section> 





在 网 页 文档 0602. html 中 插入 表单 及 表单 控件 ,添加 必要 的 HTML 标签 ,并 设置 表 
单 和 表单 控件 的 属性 ,完整 的 HTML 代码 如 表 6-9 所 示 。 
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表 6-9 网 页 0602. html 完整 的 HTML 代码 














序号 HTML 代码 
01 
02 <section class= "ec- s- reg"> 
03 <h2> 用 户 注册 < /h2> 
04 <div class="w-m"> 
05 < form id= "regForm" name= "regForm" onsubmit= "return Validator .Validate (this,2)" 
06 action="" method= "post" class= "form-m"> 
07 <ul> 
08 <1i> 
09 <label> gnbsp;< /label> 
10 <i class="radiolabel"> 
11 < input type= "radio" name= "radioButton" id= "regForm radioButtonO" 
取 checked= "checked" value= "0"/> 
13 < label for="regForm radicButton0"> 手 机 号 注册 < /label> 
14 < input type= "radio" name= "radioButton" id="regForm radicButtonl" value=" 
15 Ws 
16 <1abel for="regForm radioButton1"> 邮 箱 注册 < /1abel> 
i </i> 
18 </li> 
19 <1i class= "userInfo"> 
20 <1label id= "userTitle"> &# 25163; &# 26426; &# 21495; &# 65306;< /label> 
21 < input type= "text" name= "custom.username" size="40" maxlength= "50" 
22 Value="" id="user" class= "input"/> 
3 <i id= "errorusername" class= "inputMsg" msg= "请 使 用 手机 号 注册 ">< /这 
24 </li> 
25 <1i> 
26 <1label> 验 证 码 :< /label> 
27 < input type= "text" name= "randomcode" size="17" maxlength= "4" 
28 value="" 
29 id= "regForm randomcode" class="input input login input_ 
30 randomcode" 
31 msg= "请 正确 输入 验证 码 " max= "4" dataType= "Code" min= "4"/> 
32 < span id= "codeinfo">< img src= "createimage" " id="codeImg" 
33 title= "验证 码 看 不 清楚 ? #13; 请 单 击 更 新 为 新 的 验证 码 !" 
34 style= "cursor : pointer;" 
瑟 align =" absmiddleonclick =" $(this). attr (' src ', ' createimage; 
36 "alt=""/>< /span> 
37 <i id= "errorrandomcode" class="inputMsg" msg=""></i> 
38 </1i> 
39 <1i class="" id= "mobileCode"> 
40 <label> 激 活 码 :< /label> 
41 <input type= "text" name= "vertifycode" size="17" maxlength= 
42 Value="" 
43 id= "vertifycode" class="input input login input code™" 
44 msg= "请 正确 输入 手机 激活 码 " dataType= "Code"/> 
45 <button type= "button" class= "buttonG min" id= "codeB"> 免 费 获 取 手 机 激活 码 
46 
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续 表 
序号 HTML 代码 

47 
i </button> 
pe <i class="inputMsg" msg=""></i> 

</li> 
50 
SE <1i> 
站 <1label> 登 录 密码 :< /label> 
3 < input type= "password" name= "custom.password" size= "40" maxlength= "15" 

id="pwd" class="input" title="8~15 位 字符 ,可 使 用 字母 ,数字 或 符号 
国 的 组 合 " 
msg=" 请 输入 登录 密码 , 8~ 15 位 字符 " require="true" dataType= 

> "Require"/> 
四 <i class= "inputMsg" msg= "密码 只 能 由 8~15 位 非 空 白字 符 组 成 "> 
BS 密码 只 能 由 8~15 位 非 空 白字 符 组 成 </i> 

</li> 
60 ” 
i 过 到 > 
部 <label> 确 认 密 码 :< /label> 
es < input type= "password" name= "custom.password?2" size="40" 
本 maxlength= "15" 

id= "regForm_custom password2" class="input" msg= "请 正确 输入 确认 
65 密码 mm 
66 
剑 dataType= "Repeat" to= "custom.password"/> 
十 <i class="inputMsg" msg=""></i> 
的 </1i> 
a <1i class= "btnSubmit"> 
i < input name= "protocol" id= "customProtocol" type= "checkbox" 
人 checked= "checked" 
3 dataType= "Group" min="1" max="2" msg= "请 确认 您 已 阅读 用 户 注册 协 
议 "> 
74 这 
ji <i class= "radiolabel"> 
< label for="customProtocol"> 我 已 阅读 阿坝 旅游 网 <a href="" target= 

" blank" 
元 class= "blue link line"> 用 户 注册 协议 </a>< /label></i> 
5 <i class="inputMsg" msg=""></i> 

</li> 
80 
曾 <1i class= "btnSubmit"> 
<i><input type= "submit" title= "注册 "></i> 

</1i> 
83 

</ul> 
84 
< /form> 
85 
</div> 
86 
</section> 

87 
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5. 保存 与 浏览 网 页 
保存 网 页 文档 0602. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 6-8 所 示 。 


【同步 训练 】 
任务 6-3 创建 用 户 登 录 的 表单 网 页 


(1) 创建 样式 文件 base. css 和 main. css, 在 该 样式 文件 中 定义 标签 的 属性 、 类 选择 符 
及 其 属性 。 

(2) 创建 网 页 文档 0603. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 0603. html 中 添加 必要 的 HTML 标签 ,插入 表单 及 表单 控件 ,并 对 表单 
与 表单 控件 的 属性 进行 设置 。 

(4) 浏览 网 页 0603. html 的 效果 ,如 图 6-9 所 示 , 该 表单 网 页 用 于 实现 用 户 登 录 的 
功能 。 








a 
重 ” 欢迎 登录 
用 户 名 
密 如 (忘记 密码 了 ? ) 
蚂 证 恒 Soa 








图 6-9 网 页 0603. html 的 浏览 效果 


提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
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任务 6-4 创建 用 户 留言 反馈 网 页 


创建 如 图 6-10 所 示 的 用 户 留 言 反 馈 网 页 0604. html。 





言 反馈 全 
您 的 手机 号 : 


请 将 您 的 反馈 意见 和 建议 告诉 我 们 ! 
请 输入 建议 内 容 


提交 留言 











图 6-10 用 户 留 言 反 馈 网 页 0604. html 的 浏览 效果 


提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 】 


1. 使 用 CSS 样式 设置 表单 及 表单 控件 的 样式 


表单 本 身 的 属性 较 少 ,可 以 使 用 CSS 样式 来 控制 表单 的 样式 ,例如 设置 表单 的 字体 、 
背景 .边界 .边框 和 填充 等 属性 。form 元 素 是 块 状元 素 , 其 他 控件 都 是 内 联 元 素 。 
单行 文本 框 的 样式 定义 如 下 : 





#username{ 
font- size: 12px; 
line- height: 25px; 
Color: #467fb6; 
width:150px; 
height: 20px; 
float: left; 
margin: 5px 10px; 
border: lpx solid #a2d4f27 
background- image: Url (../images/text login bg.gif); 
background- repeat: no- repeat; 


background- position: center center; 
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为 表单 控件 的 显示 内 容 或 提示 信息 设置 合适 的 字体 大小、 颜色 等 属性 ,使 表单 控件 
及 内 容 更 加 美观 ,CSS 的 字体 属性 可 以 被 应 用 到 所 有 的 表单 控件 。 

可 以 为 表单 设置 合适 的 边框 属性 ,结合 边框 的 样式 、 宽 度 和 颜色 能 够 设计 出 特色 鲜明 
的 控件 边框 样式 ,也 可 以 为 表单 控件 的 某 条 边框 设置 样式 ,实现 单 边框 样式 。 

可 以 利用 背景 色 和 背景 图 像 对 表单 控件 进行 美化 ,利用 background-color 属性 设置 
背景 颜色 ,利用 background-image 属性 设置 背景 图 像 。 为 表单 控件 设置 背景 图 像 时 ,应 
避免 图 像 平 铺 , 可 以 设置 no-repeat 属性 值 ,禁止 图 像 平 铺 ,也 可 以 设置 fixed 属性 值 固 定 
背景 图 像 的 位 置 。 

提示 : 为 表单 控件 定义 样式 时 ,应 注意 以 下 两 点 。 

(1) 由 于 输入 控件 都 使 用 input 标签 ,因此 要 分 别 定 义 不 同 表单 控件 的 样式 时 ,需要 使 用 
id 选择 符 或 类 选择 符 。 要 对 多 个 按钮 定义 不 同 的 样式 时 ,也 要 使 用 id 选择 符 或 类 选择 符 。 

(2) 定义 列表 控件 的 样式 时 ,针对 select 标签 或 option 标签 定义 的 效果 是 一 样 的 , 定 
义 菜 单 控件 的 样式 时 ,针对 option 标签 定义 的 样式 只 应 用 于 下 拉 选 择 项 ,针对 select 标签 
定义 的 样式 应 用 于 所 选项 。 

2. 表单 按钮 与 单行 文本 域 的 美化 

表单 按钮 可 以 通过 “定制 图 像 按钮 的 方式 引入 图 片 作为 按钮 ,HTML 代码 如 表 6-10 
所 示 。 文 字 输入 框 (单行 文本 域 ) 也 可 以 通过 一 些 设置 进行 美化 ,如 图 6-11 所 示 ,在 输入 
框 的 左 侧 使 用 一 个 放大 镜 图 标 作为 装饰 ,通过 定义 背景 图 像 引 入 此 图 标 ,并 且 设 置 为 不 重 
复 。 设 置 文本 缩 进 , 避 免 输入 文字 重 和 至 在 图 标 上 ,CSS 代码 如 表 6-11 所 示 。 

表 6-10 表单 及 控件 的 HTML 代码 
行 号 HTML 代码 











< form action="" method= "post" name= "search" id= "search"> 

< input type= "text" name= "keyword" id= "keyword"/> 

< input type= "image" src= "images/search btn.jpg" name= "search btn" jd- "search btn"/> 
< /form> 





装饰 图 标 ”单行 文本 域 。 按钮 
丰 一 一 多 
图 6-11 表单 按钮 与 输入 框 的 美化 


表 6-11 美化 表单 按钮 与 单行 文本 域 的 CSS 代码 








行 号 CSS 代码 
01 #search #keyword { 
02 float:left; 
03 wiqdth:170px; 
04 height :18px; 
05 line- height :18px; 
06 Color:# 06f; 
07 border:1px solid # 999; 
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续 表 
得 号 CSS 代码 
08 background:# fff url (images/search ico.jpg) no- repeat 0 0; 
09 text- indent :20px; 
10 
1 #5search { 
12 width:226px; 
13 height :20px; 
14 3 
柏 
16 #search # Search btn { 
bn float:right; 
18 width:46px; 
19 height :20px; 
20 } 
【问题 探究 】 


【问题 1】 怎样 使 用 户 直 接 在 文本 框 中 输入 内 容 ? 

如 果 在 表单 文本 框 中 加 入 了 提示 信息 ,浏览 者 要 在 该 文本 框 中 输入 信息 ,往往 要 用 鼠 
标 选取 文本 框 中 的 提示 信息 然后 将 其 删除 ,再 输入 有 用 的 信息 。 只 需 在 二 textarea 二 中 输 
和 人 代码 “onMouseOver="this. focus()" onFocus 二 "this. select()"”, 就 可 以 不 必 删 除 提 
示 信 息 而 直接 在 文本 框 中 输入 有 用 的 信息 。 

【问题 2】 将 表单 数据 发 送 到 服务 器 有 哪 两 种 方法 ”各 有 何 特点 ? 

将 表单 数据 发 送 到 服务 器 有 两 种 方法 : GET 方法 和 POST 方法 。 

GET 方法 将 表单 内 的 数据 附加 到 URL 后 传送 给 服务 器 ,服务 器 用 读 取 环 境 变量 的 
方法 读 取 表单 内 的 数据 ,一 般 浏 览 器 默认 的 发 送 数据 方式 为 GET 方法 。 

POST 方法 用 标准 输入 方式 将 表单 内 的 数据 传送 给 服务 器 ,服务 器 用 读 取 标准 输入 
的 方式 读 取 表 单 内 的 数据 。 

如 果 要 使 用 GET 方法 发 送 长 表单 ,URL 的 长 度 应 限制 在 8192 个 字符 以 内 。 如 果 发 
送 的 数据 量 太 大 ,数据 将 被 截断 ,从 而 导致 意外 或 失败 的 处 理 结果 。 另 外 ,在 发 送 用 户 名 
和 密码 或 其 他 机 密 信 息 时 ,不 要 使 用 GET 方法 ,应 使 用 POST 方法 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答 题 

(五 ) 编程 题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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单元 7 网 页 中 音频 与 视频 的 
应 用 设计 


HTML5 可 以 使 用 二 audio 二 标签 在 页 面 中 播放 音乐 ,使 用 一 video> 标 签 在 网 页 中 播 
放 视 频 , 相 对 HTML4 使 用 二 embed 宝 和 二 object 二 标签 在 页 面 中 播放 音乐 或 视频 要 简单 
得 多 。 


【知识 尾 备 】 


1. HTMLS 的 多 媒体 元 素 标签 


1) 一 audio 二 标签 

二 audio 二 标签 用 于 定义 音频 内 容 , 例 如 音乐 或 其 他 音频 流 。 二 audio 二 与 达 /audio 二 
之 间 插 和 人 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 出 不 支持 该 标签 的 提示 信息 。 示 例 
代码 如 下 : 


<audio controls> 
< source src= "horse.ogg" type= "audio/o0gg"> 
< source src= "horse.mp3" type= "audio/mpeg"> 
您 的 浏览 器 不 支持 audio 标 签 
< /audio> 
当前 ,audio 元 素 主 要 支持 三 种 音频 格式 ,分 别 为 Ogg Vorbis、MP3 和 Wav。audio 
元 素 允 许多 个 source 元 素 ,source 元 素 可 以 链接 不 同 的 音频 文件 ,浏览 器 将 使 用 第 一 个 
可 识别 的 格式 进行 播放 。 
2) 二 video 二 标签 
去 video> 标 签 用 于 定义 视频 ,例如 电影 片段 或 其 他 视频 流 。 示 例 代 码 如 下 : 


<video src= "movie.ogg" controls= "controls"> 您 的 浏览 器 不 支持 video 标 签 < /video> 


去 video> 与 二 /video> 之 间 插 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 出 不 支 
持 该 标签 的 提示 信息 。 

当前 ,video 元 素 支持 以 下 三 种 视频 格式 。 

Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

MPEG4: 带 有 H. 264 视频 编码 和 AAC 音频 编码 的 MPEG4 文件 。 
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WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 

video 元 素 允 许多 个 source 元 素 , source 元 素 可 以 链接 不 同 的 视频 文件 。 浏 览 器 将 
使 用 第 一 个 可 识别 的 格式 进行 播放 。 

3) 二 source 二 标签 

二 source 记 标签 用 于 为 多 媒体 元 素 ( 例 如 二 video 二 和 二 audio 二 ) 定 义 媒介 资源 。 
一 source> 标 签 允 许 指定 可 替换 的 视频 /音频 文件 , 供 浏 览 器 根据 它 对 媒体 类 型 或 者 编 解 
码 器 的 支持 进行 选择 。 

4) 所 embed 一 标签 

< 二 embed> 标 签 用 于 定义 嵌入 的 内 容 ( 包 括 各 种 媒体 ) ,格式 可 以 是 midi、wav、AIFF、 
AU、MP3 ,flash 等 。 例 如 ,一 embed src 二 "flash. swf"/ 盖 。 示 例 代码 如 下 : 


<embed src= "01.swf" /> 


5) 二 track 二 标签 
< 一 track 二 标签 为 诸如 二 video 二 和 二 audio 二 元 素 之 类 的 媒介 规定 外 部 文本 轨道 。 


2. CSS 媒介 类 型 


媒介 类 型 (Media Types) 人 允许 定义 以 何 种 媒介 来 提交 文档 。 文 档 可 以 被 显示 在 诸如 
显示 器 、 纸 媒介 或 者 听觉 浏览 器 中 。 某 些 CSS 属性 仅仅 被 设计 为 针对 某 些 媒介 ,例如 
voice-family 属性 被 设计 为 针对 听觉 用 户 终端 。 其 他 的 属性 可 被 用 于 不 同 的 媒介 ,例如 
font-size 属性 可 被 用 于 显示 器 以 及 印刷 媒介 ,但 是 也 许 会 带 有 不 同 的 值 。 显 示 器 上 面 的 
显示 的 文档 通常 会 需要 比 纸 媒 介 文 档 更 大 的 字号 ,同时 ,在 显示 器 上 sans-serif 字体 更 易 
阅读 ;而 在 纸 媒介 上 ,serif 字体 更 易 阅 读 。 


3. @media 规则 


@media 规则 用 于 实现 在 相同 的 样式 表 中 使 用 不 同 的 样式 规则 来 针对 不 同 的 媒介 。 

下 面 这 个 示例 代码 中 的 样式 告知 浏览 器 在 显示 器 上 显示 14 像素 的 Verdana 字体 。 
但 是 假如 页 面 需 要 被 打印 ,将 使 用 10 个 像素 的 Times 字体 。 注 意 font-weight 被 设置 为 
粗 体 ,不 论 显示 器 还 是 纸 媒 介 。 


<html> 
<head> 
<style> 
@media screen 
{ 
P.test {font- family:verdana, sans- serif; font- size:14px} 
§ 
Qmedia print 
{ 
p.test {font- family:times, serif; font- size:10px} 
} 
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@media screen,print 
p.test {font- weight:bold} 
} 
</style> 
< /head> 
<body> ...< /body> 
</htm> 


注意 : 媒介 类 型 名 称 对 大 小 写 不 敏感 。 


【5 引导 训练 】 


任务 7-1 设计 基于 HIML5 的 网 页 
音乐 播放 器 之 一 


【任务 描述 】 


创建 网 页 0701. html, 在 该 网 页 中 插入 HTML5 Audio 元 素 , 该 元 素 用 于 播放 音频 ， 
浏览 网 页 时 Audio 元 素 的 界面 效果 如 图 7-1 所 示 。 


po/ @— 0) 一 8 # 


图 7-1 网 页 音乐 播放 器 0701. html 的 界面 效果 


【任务 吝 邦 】 


1. 创建 所 需 的 文件 夹 


在 文件 夹 “HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit07, 然 后 在 该 文件 夹 
中 创建 子 文件 夹 0701。 


2. 启动 Dreamweaver CC 
使 用 Windows 的 [开始 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 创建 本 地 站 点 和 网 页 


创建 1 个 名 称 为 “单元 7” 的 本 地 站 点 ,站 点 文件 夹 为 Unit07。 在 该 站 点 的 文件 夹 
0701 中 创建 网 页 0701. html。 


4. 在 网 页 中 插入 HTMLS Audio 元 素 


在 网 页 的 [设计 3 窗口 单 击 【插入 了 面板 的 HTML 工具 栏 中 的 HTML5 Audio 按钮 ， 
Tz7 
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如 图 7-2 所 示 。 于 是 ,在 光标 位 置 插入 1 个 HTML5 Audio 元 素 ,对 应 的 HTML 代码 
如 下 : 


<audio controls>< /audio> 





7-2 在 HTML 工具 栏 中 选择 HTML5 Audio 


5. 设置 HTMLS Audio 元 素 的 属性 


在 网 页 中 选中 Audio 元 素 ,在 【属性 了 面板 中 设置 “ 源 ” 为 music/song. mp3, 选 择 复 选 
框 Controls。Audio 元素 的 属性 设置 完成 后 ,【 属 性 3 面板 如 图 7-3 所 示 。 





图 7-3 在 【属性 了 面板 中 设置 Audio 元 素 的 属性 


对 应 的 代码 如 下 : 


<audio controls > 
< source src= "music/song .mp3" type= "audio/mp3"> 
</audio> 


6. 保存 与 浏览 网 页 

保存 网 页 0701. html, 在 Google Chrome 中 浏览 该 网 页 , Audio 元 素 的 界面 效果 如 
7-1 所 示 。 

在 图 7-1 所 示 的 音乐 播放 器 中 单 击 【 播 放 ] 按 钮 , 即 i 
可 开始 播放 音乐 ,如 图 7-4 所 示 。 通 过 调整 音量 条 还 可 图 7-4 播放 音乐 
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以 调节 音量 大 小 。 


任务 7-2 设计 基于 HIML5 的 网 页 
视频 播放 器 之 一 


【任务 冀 太 】 


创建 网 页 0702. html, 在 该 网 页 中 插入 HTML5 Video 元 素 , 该 元 素 用 于 播放 视频 ， 
浏览 网 页 时 Video 元 素 的 界面 效果 如 图 7-5 所 示 。 





Pp 00104 @———— et 





图 7-5 ”Video 元 素 的 界面 效果 


【任务 飞 施 】 


1. 创建 所 需 的 文件 夹 和 网 页 
在 文件 夹 Unit07 中 创建 子 文件 夹 0702, 在 文件 夹 0702 中 创建 网 页 0702. html。 


2. 在 网 页 中 插入 HTMLS Video 元 素 [| 
HTML ha 
在 网 页 的 5 设计 窗口 , 单 击 【插入 了 面板 的 HTML 工 男 湖 
具 栏 中 的 HTML5 Video 按钮 ,如 图 7-6 所 示 。 于 是 ,在 光 本 ek 
标 位 置 插入 1 个 HTML5 Video 元 素 , 对 应 的 HTML 代码 Bl 让 


如 下 : 


<Video controls>< /video> 


3. 设置 HTML5 Video 元 素 的 属性 


在 网 页 中 选中 Video 元 素 , 在 [属性] 面板 中 设置 W 为 
640 像素 , H 为 264 像素 ,设置 “ 源 ” 为 video/oceans-clip. 
mp4,， Poster 为 images/oceans-clip. png， 选择 复 选 框 


Controls。Video 元 素 的 属性 设置 完成 后 ,【 属 性 面板 如 图 在 HTML 工具 栏 中 选 
图 7-7 所 示 。 择 HTML5 Video 
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图 7-7 在 [属性 面板 中 设置 Video 元 素 的 属性 


对 应 的 代码 如 下 : 


<video width="640" height= "264" poster= "images/oceans- clip.png" controls > 
< source src= "video/oceans- clip.mp4" type= "video/mp4"> 
< source src= "video/oceans- clip.webm" type= "video/webm"> 
< source src= "Video/oceans- clip.ogv" type= "video/ogg"> 

< /video> 


4. 保存 与 浏览 网 页 


保存 网 页 0702. html, 在 Google Chrome 中 浏览 该 网 页 , Video 元 素 的 界面 效果 如 
图 7-5 所 示 。 

在 图 7-5 所 示 的 视频 播放 器 中 单 击 【播放 按钮 , 即 可 开始 播放 视频 ,如 图 7-8 所 示 。 
通过 调整 音量 条 还 可 以 调节 音量 的 大 小 。 











7-8 在 网 页 0702. html 中 播放 视频 


【同步 训练 】 


任务 7-3 设计 基于 HTML5 的 网 页 
音乐 播放 器 之 二 


设计 网 页 音乐 播放 器 0703. html, 其 界面 效果 如 图 7-9 所 示 。 

浏览 该 网 页 时 ,音乐 播放 器 能 自动 进行 播放 。 

提示 : 

(1) 在 网 页 中 插入 HTML5 Audio 元 素 并 设置 其 属性 。 

在 网 页 0703. html 中 插入 HTML5 Audio 元 素 并 设置 图 7-9 网 页 音乐 播放 器 0703 
其 属性 ,对 应 的 代码 如 下 : “html 的 界面 效果 
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<audio id= "theaudio" src= "media/ 北 京北 京 .mp3" controls>< /audio> 


(2) 编写 JavaScript 代码 实现 网 页 音乐 播放 器 自动 播放 效果 。 
网 页 音乐 播放 器 0703. html 中 实现 所 需 功能 的 JavaScript 代码 如 表 7-1 所 示 。 


表 7-1 实现 网 页 音乐 播放 器 自动 播放 效果 的 HTML 代码 及 相关 的 JavaScript 代码 





序号 HTML 代码 
01 <script type= "text/javascript"> 
02 window.addEventListener('load', eventWindowLoaded, false); 
03 function eventWindowLoaded() { 
04 var audioElement =document .getElementById ("theaudio"); 
05 audioElement .play (); 
06 } 


07 </script> 





保存 该 网 页 ,打开 浏览 器 Google Chrome, 即 可 开始 自动 播放 音乐 。 


任务 7-4 设计 基于 HIML5 的 网 页 
视频 播放 器 之 二 


设计 网 页 视频 播放 器 0704. html, 其 界面 效果 如 图 7-10 所 示 。 


[WT 
Memo 


7-10 ”网 页 视频 播放 器 0704. html 的 界面 效果 

















提示 : 网 页 视频 播放 器 0704. html 的 HTML 代码 如 表 7-2 所 示 。 
表 7-2 网 页 视频 播放 器 0704. html 的 HTML 代码 





序号 HTML 代码 
01 < section id= "player"> 
02 <video width= "720" height= "400" id= "media" controls autoplay> 
03 < source src= "video/trailer.mp4" type= "video/mp4"> 
04 < source src="video/trailer.0gg" type= "video/ogg"> 
05 </video> 


06 </section> 
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保存 网 页 0704. html, 在 浏览 器 Google Chrome 中 浏览 该 网 页 ,其 效果 如 图 7-10 
所 示 。 


【技术 进 阶 】 


1. 探析 基于 HTMLS 的 网 页 音乐 播放 器 


创建 网 页 音乐 播放 器 0705. html, 该 网 页 音乐 播放 器 的 主体 结构 为 上 、 中 、 下 结构 , 顶 
部 分 布 了 多 个 播放 按钮 ,中 部 为 音乐 列表 ,底部 为 播放 模式 切换 按钮 。 
网 页 音乐 播放 器 0705. html 的 浏览 效果 如 图 7-11 所 示 。 


| | bl 02:26/04:27 





图 7-11 网 页 音乐 播放 器 0705. html 的 浏览 效果 


2. 探析 基于 HTMLS 的 网 页 视频 播放 器 
创建 网 页 视频 播放 器 0706. html, 其 界面 效果 如 图 7-12 所 示 。 





7-12 网 页 视频 播放 器 0706. html 的 界面 效果 
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【问题 探究 】 


【问题 1】 HTMLS 的 音频 /视频 标签 有 了 哪些? 
HTML5 的 音频 /视频 标签 如 表 7-3 所 示 。 


表 7-3 HTMLS5 的 音频 /视频 标签 














标签 名 称 标签 描述 标签 名 称 标签 描述 
< 一 audio> | 定义 声音 内 容 <track> 定义 用 在 媒体 播放 器 中 的 文本 轨道 
二 source> | 定义 媒介 源 二 video> | 定义 视频 
< 一 object> | 定义 嵌入 的 对 象 一 param> | 定义 对 象 的 参数 
embed> at HTML) 定 义 














【问题 2】 HTMLS 的 Audio/Video 属性 有 哪些 ? 
提示 : 本 问题 相关 内 容 请 扫描 二 维 码 查看 。 
【问题 3】 HTMLS 的 Audio/Video 方法 有 哪些 ? 
HTML5 的 Audio/Video 方法 如 表 7-4 所 示 。 





表 7-4 HTMLS 的 Audio/Video 方 法 











方法 名 称 方法 描述 方法 名 称 方法 描述 
load() 重新 加 载 音频 /视频 元 素 play() 开始 播放 音频 /视频 
addTextTrack() ede! 频 / 视 频 添加 新 的 文本 | 。 pauseO 暂停 当前 播放 的 音频 /视频 
splayTwoe() | 检查 浏览 器 是 否 能 播放 指定 

的 音频 /视频 类 型 














【问题 4】 HTMLS 的 Audio/Video 事件 有 哪些 ? 
提示 : 本 问题 相关 内 容 请 扫描 二 维 码 查看 。 

【问题 S】 HTMLS 的 <source 之 标签 的 属性 有 哪些 ? 
HTML5 的 二 source 二 标签 的 属性 如 表 7-5 所 示 。 


表 7-5 HTMLS 的 <source 之 标签 的 属性 




















属性 名 称 取 值 属性 描述 
media media query 规定 媒体 资源 的 类 型 
SITC url 规定 媒体 文件 的 URL 
type numeric value 规定 媒体 资源 的 MIME 类 型 


【问题 6】 HTMLS 的 <embed 之 标签 属性 有 哪些 ? 
HTML5 的 过 embed 盖 标签 属性 如 表 7-6 所 示 。 
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表 7-6 HTMLS 的 <embed 之 标签 属性 
属性 名 称 | 取 值 属性 描述 属性 名 称 | 取 值 属性 描述 





sre url 嵌入 内 容 的 URL type type 定义 嵌入 内 容 的 类 型 























height 像素 设置 嵌入 内 容 的 高 度 width 像素 设置 嵌入 内 容 的 宽度 


【单元 习题 】 


(一 ) 选择 题 
(二 ) 填空 题 
(三 ) 简 答 题 
提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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HTML5 增加 了 对 图 像 以 及 动画 的 支持 ,在 HTML5 中 实现 绘图 操作 ,主要 依赖 于 
一 canvas 二 元 素 以 及 二 canvas 二 元 素 相 关 的 API, 基 于 Canvas、 SVG 、WebGL 及 CSS3 的 
3D 功能 ,用 户 会 惊叹 在 浏览 器 中 所 呈现 的 惊人 视觉 效果 。 同 时 HTML5 的 所 canvas 之 元 
素 提 供 了 一 个 非常 强大 的 、 移 动 友好 的 方式 去 开发 有 趣 互 动 的 游戏 。 


【知识 尾 备 】 


1. HTMLS5 的 过 canvas 之 标签 


二 canvas 二 标签 用 于 在 网 页 上 绘制 图 形 。 二 canvas 二 标签 只 是 定义 图 形容 器 ( 面 
布 ) ,必须 使 用 JavaScript 在 网 页 上 绘制 图 像 。 画 布 是 一 个 矩形 区 域 , 可 以 控制 其 每 一 个 
像素 。canvas 拥有 多 种 绘制 路 径 ,矩形 . 圆 形 .字符 以 及 添加 图 像 的 方法 。 

通过 canvas 元 素来 显示 一 个 红色 的 矩形 的 代码 如 下 : 


<canvas id= "cvs" width= "400" height= "300">< /canvas> 
<script type= "text/JavaScript"> 
Var myCanvas =document .getElementById ("cvs"); 
Var context= canvas.getContext ("2d"); 
context .fillStyle= "#FF0000"; 
context .fillRect (0,0, 80, 100); 


</script> 


2. HTMLS 的 画布 与 画笔 
1) 画布 


Canvas 意 为 画布 ,而 HTML5 中 的 Canvas 也 跟 现实 生活 中 的 画布 非常 相似 ,所 以 ， 
把 它 看 成 一 块 实 实在 在 的 画布 可 以 方便 理解 。 

用 Canvas 作画 ,需要 有 一 块 “ 画 布 ”, 即 创建 一 个 Canvas 即 可 。 

创建 Canvas 元 素 的 方法 很 简单 ,只 需要 在 HTML5 页 面 中 添加 二 canvas 记 元 素 , 示 
例 代码 如 下 : 


<canvas id= "cvs" width= "400" height= "300"> 您 的 浏览 器 不 支持 canvas< /canvas> 
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为 了 能 在 JavaScript 代码 中 引用 元 素 , 最 好 给 元 素 设置 id, 也 需要 给 Canvas 设 定 高 
度 和 宽度 。 其 中 ,标签 里 面 的 文字 只 能 在 不 支持 Canvas 的 浏览 器 中 才 可 以 看 到 ,在 支持 
Canvas 的 浏览 器 中 则 看 不 到 。 

注意 : 这 个 画布 的 特性 有 必要 说 一 下 , 它 和 img 一 样 , 有 两 个 原生 的 属性 , 即 width 
和 height, 单 位 为 像素 。 同 时 ,因为 它 是 一 个 HTML 元 素 , 所 以 也 可 以 使 用 CSS 来 定义 
width 和 height, 但 是 ,其 自身 的 宽 、 高 和 通过 CSS 定义 的 宽 、 高 是 不 一 样 的 。Canvas 自 
身 的 宽 、 高 就 是 画布 本 身 的 属性 ,而 CSS 定义 的 宽 高 则 可 以 看 作 是 缩放 ,如 果 缩 放 得 太 随 
意 ,那么 画布 上 的 图 形 可 能 变 得 自己 都 认 不 出 来 。 除 非特 殊 情况 ,一 般 不 要 用 CSS 来 定 
义 Canvas 的 宽度 和 高 度 。 

由 于 Canvas 元 素 本 身 是 没有 绘图 能 力 的 ,其 本 身 只 是 为 JavaScript 提供 了 一 个 绘制 
图 像 的 区 域 ,要 在 画布 中 绘制 图 形 需 要 使 用 JavaScript 代码 。JavaScript 使 用 id 来 寻找 
Canvas 元 素 ,首先 通过 getElementById 函数 找到 Canvas 元 素 , 然 后 初始 化 上 下 文 。 之 
后 可 以 使 用 上 下 文 API 绘制 各 种 图 形 。 

画布 有 了 ,现在 我 们 把 它 拿 出 来 ,获取 网 页 中 画布 对 象 的 代码 如 下 : 





Var myCanvas= document .getElementById ("cvs'"); 


可 见 跟 获 取 其 他 元 素 的 办 法 一 模 一 样 。 

Canvas 有 一 个 和 现实 的 画布 不 一 样 的 特点 就 是 它 默认 是 透明 的 ,没有 背景 色 。 

2) 画笔 

创建 好 了 画布 后 ,让 我 们 来 准备 画笔 ,创建 context 对 象 。 使 用 getContext() 方 法 从 
画布 中 得 到 二 维 绘制 对 象 的 代码 如 下 : 


Var context =myCanvas .getContext ("2d"); 


getContext("2d") 对 象 是 HTML5 的 内 建 对 象 , 拥 有 多 种 绘制 路 径 .矩形 、 圆 形 .字符 
以 及 添加 图 像 的 方法 ,在 JavaScript 中 通过 操作 它 即 可 在 Canvas 画布 中 绘制 所 需 的 
图 形 。 

大 多 数 Canvas 绘图 API 都 没有 定义 在 二 canvas 二 元 素 上 ,而 是 定义 在 通过 画布 的 
getContext() 方 法 获得 的 一 个 “绘图 环境 ?对 象 上 。 志 canvas 二 元 素 本 身 并 没有 绘制 能 力 
( 它 仅仅 是 图 形 的 容器 ) ,必须 使 用 脚本 来 完成 实际 的 绘图 任务 。getContext() 方 法 可 以 
返回 一 个 对 象 ,该 对 象 提 供 了 用 于 在 画布 上 绘图 的 方法 和 属性 。 

下 面 的 两 行 代 码 可 以 绘制 一 个 红色 的 矩形 。 


Context.fil11Style= "#EF0000"7 
Context.fillRect(0,0,80,100)7 


fillStyle 方法 将 其 染 成 红色 ,fillRect 方法 规定 了 形状 、 位 置 和 尺寸 。 
3. HTMLS 的 坐标 与 路 径 


1) 坐标 
在 一 个 平面 上 确定 一 个 点 需要 两 个 值 : x 坐标 和 >y 坐标 。Canvas 的 原点 位 于 左上 
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角 。 上 面 的 fillRect(0,0,80,100) 方 法 是 在 画布 上 绘制 80 X 100 的 矩形 ,从 左上 角 (0,0) 
开始 。 

如 图 8-1 所 示 ,画布 的 zx 和 yy 坐标 用 于 在 画布 上 对 绘画 进行 定位 。 

2) 路 径 入 


在 Canvas 中 所 有 基本 图 形 都 是 以 路 径 为 基础 二 
的 ,通常 使 用 Context 对 象 的 moveTo () ,lineTo ()、 
rect() .arc() 等 方法 先 在 画布 中 描 出 图 形 的 路 径 了 


点 ,然后 使 用 fill() 或 者 stroke() 方 法 依照 路 径 点 图 8-1 HTML5 图 形 绘制 的 坐标 与 原点 
来 填充 图 形 或 者 绘制 线条 。 也 就 是 说 ,我 们 在 调 

用 Context 的 lineTo() ,strokeRect() 等 方法 时 ,其 实 就 是 往 已 经 构建 的 context 路 径 集 
合 中 再 添加 一 些 路 径 点 ,在 最 后 使 用 fil() 或 stroke() 方 法 进行 绘制 时 ,都 是 依据 这 些 
路 径 点 来 进行 填充 或 画 线 。 

在 每 次 开始 绘制 路 径 前 ,都 应 该 使 用 context. beginPath( ) 方 法 来 告诉 Context 对 象 
开始 绘制 一 个 新 的 路 径 , 其 作用 是 清除 之 前 的 路 径 并 提醒 Context 开始 绘制 一 条 新 的 路 
径 , 和 否则 当 调用 stroke( ) 方 法 的 时 候 会 绘制 之 前 所 有 的 路 径 ,影响 绘制 效果 ,同时 也 因为 
重复 多 次 操作 而 影响 网 页 性 能 。 在 绘制 完成 后 ,调用 Context 对 象 的 closePath() 方 法 显 
式 地 关闭 当前 的 路 径 , 不 过 不 会 清除 路 径 。 另 外 ,如 果 在 填充 时 路 径 没有 关闭 ,那么 
Context 会 自动 调用 closePath() 方 法 将 路 径 关闭 。 

(1) 路 径 的 开始 与 关闭 。 

beginPath(): 开始 绘制 一 个 新 路 径 。 

closePath(): 通过 绘制 一 条 当前 点 到 路 径 起 点 的 线段 来 闭合 形状 。 

这 两 个 方法 分 别 用 来 通知 Context 开始 一 个 新 的 路 径 和 关闭 当前 的 路 径 。 在 
Canvas 中 使 用 路 径 时 ,应 该 保持 一 个 良好 的 习惯 ,每 次 开始 绘制 路 径 前 都 要 调用 一 次 
beginPath() 方 法 ,因为 如 果 Context 中 的 路 径 数 很 多 时 ,在 开始 绘制 新 路 径 前 不 使 用 
beginPath, 则 每 次 绘制 都 要 将 之 前 的 路 径 重 新 绘制 一 遍 , 这 时 性 能 会 大 幅度 下 降 。 因 此 ， 
除非 有 特殊 需要 ,每 次 开始 绘制 路 径 前 都 要 调用 beginPath 来 开始 新 路 径 。 

(2) 移动 路 径 与 直线 及 矩形 路 径 的 绘制 。 

Q@ void moveTo(in float x, in float y) 。 

moveTo() 方 法 用 于 显 式 地 指定 路 径 的 起 点 。 默 认 状 态 下 ,第 一 条 路 径 的 起 点 是 画布 
的 (0, 0) 点 ,之 后 的 起 点 是 上 一 条 路 径 的 终点 。 两 个 参数 分 别 表 示 起 点 的 x、y 坐标 值 。 

在 Canvas 中 绘制 路 径 , 一 般 是 不 需要 指定 起 点 的 ,只 需要 使 用 moveTo() 方 法 来 指 
定 要 移动 到 的 位 置 。 

©@ void lineTo(in float x, in float y) 。 

lineTo() 方 法 用 于 描绘 一 条 从 起 点 到 指定 位 置 的 直线 路 径 , 描 绘 完成 后 绘制 的 起 点 
会 移动 到 直线 的 终点 。 参 数 表 示 指 定位 置 的 x、y 坐标 值 。 

加 void rect(in float x, in float y, in float w, in float h) 。 

rect() 方 法 用 于 描绘 一 个 已 知 左上 角 顶 点 位 置 以 及 宽 和 高 的 矩形 路 径 ,描绘 完成 后 
Context 的 绘制 起 点 会 移动 到 该 矩形 的 左上 角 顶 点 。 参 数 表示 矩形 左上 和 角 顶 点 的 x、y 坐 
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标 以 及 矩形 的 宽 和 高 。 


rect() 方 法 与 后 面 要 介绍 的 arc() 方 法 与 其 他 路 径 方法 有 一 点 不 同 , 它 们 是 使 用 参数 


指定 起 点 的 ,而 不 是 使 用 Context 维护 起 点 。 
(3) 曲线 路 径 。 


@ void arcTo(in float x1, in float yl, in float x2, in float y2, in float radius) 。 
arcTo() 方 法 用 于 绘制 一 个 与 两 条 线段 相 切 的 圆 弧 路 径 , 两 条 线段 分 别 以 当前 的 
Context 绘制 起 点 和 (x2，y2) 点 为 起 点 ,都 以 (x1，yl) 点 为 终点 , 圆 弧 的 半径 为 radius。 


绘制 完成 后 ,绘制 起 点 会 移动 到 以 (x2，y2) 为 起 点 的 线段 与 圆 弧 的 切 点 。 


©@ void arc(in float x，in float y, in float radius, in float startAngle，in float 


endAngle, in boolean anticlockwise) 。 


arc() 方 法 用 于 绘制 一 个 以 (x,y) 点 为 圆心 ,radius 为 半径 、startAngle 为 起 始 弧度 、 
endAngle 为 终止 弧度 的 圆 弧 路 径 。 参 数 中 的 两 个 弧度 以 0 表示 0" ,位 置 在 3 点 钟 方向 ; 


Math. PI 值 表 示 180" ,位 置 在 9 点 钟 方向 。 


arc() 方 法 各 个 参数 及 其 含义 如 表 8-1 所 示 。arc() 方 法 用 来 绘制 一 段 圆 弧 路 径 , 通 过 
圆心 位 置 .起 始 弧度 、 终 止 弧度 来 指定 圆 弧 的 位 置 和 大 小 ,这 个 方法 也 不 依赖 于 Context 




















维护 的 绘制 起 点 。 
表 8-1 arc() 方 法 各 个 参数 及 其 含义 

参数 名 称 参数 描述 
x 圆 中心 的 x 坐标 值 
y 圆 中 心 的 y 坐标 值 
radius 圆 的 半径 
startAngle 起 始 角 , 以 弧度 计 
endAngle 结束 角 ,以 弧度 计 
anticlock wise 可 选项 。false 表示 顺 时 针 方 向 ,true 表示 逆 时 针 方 向 





arc() 方 法 的 开始 角 、 结 束 角 以 及 角度 大 小 表示 如 图 8-2 所 示 。 


270° (Math.PI*3/2) 


顺 
180° (Math.PD 


时 针 ( 


， 





(dh 


| _ 逆 时 针 (true) 





90° (Math.P1/2) 
8-2 ”arc() 方 法 的 开始 角 、 结 束 角 以 及 角度 大 小 表示 示意 图 
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©®@ void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y) 。 

quadraticCurveTo() 方 法 用 来 绘制 二 次 样 条 曲线 路 径 , 参 数 中 cpx 与 cpy 指定 控制 
点 的 位 置 ,x 和 y 指定 终点 的 位 置 ,起 点 则 是 由 Context 维护 的 绘制 起 点 。 

@ void bezierCurveTo(in float cplx, in float cply, in float cp2x, in float cp2y, in 
float x, in float y) 

bezierCurveTo() 方 法 用 来 绘制 贝 塞 尔 曲 线路 径 。 它 与 quadraticCurveTo() 相 似 , 不 

过 贝 塞 尔 曲线 有 两 个 控制 点 ,因此 参数 中 的 cplx、cply、cp2x、cp2y 用 来 指定 两 个 控制 点 

的 位 置 ,而 x 和 y 指定 终点 的 位 置 。 

(4) fill() stroke() 、clipO 〇 方法 。 

路 径 绘 制 完成 后 ,需要 调用 Context 对 象 的 fill() 和 stroke() 方 法 来 填充 路 径 和 绘制 
路 径 线 条 ,或 者 调用 clip() 方 法 来 剪辑 Canvas 区 域 。 

fill( ) 方 法 用 于 使 用 当前 的 填充 风格 来 填充 路 径 的 区 域 , stroke( ) 方 法 用 于 按照 已 有 
的 路 径 绘制 线条 。clip() 方 法 用 于 按照 已 有 的 路 线 在 画布 Canvas 中 设置 剪辑 区 域 。 调 用 
clip() 方 法 之 后 ,图 形 绘制 代码 只 对 剪辑 区 域 有 效 而 不 再 影响 区 域外 的 画布 。 这 个 方法 
在 要 进行 局 部 更 新 时 很 有 用 。 默 认 情况 下 ,剪辑 区 域 是 一 个 左上 角 在 (0, 0) , 宽 和 高 分 别 
等 于 Canvas 元 素 的 宽 和 高 的 矩形 , 即 得 到 的 剪辑 区 域 为 整个 Canvas 区 域 。 

(5) clearRect() fillRect() ,strokeRect() 方 法 。 

这 三 个 方法 并 不 是 路 径 方 法 ,而 是 用 来 直接 处 理 Canvas 上 的 内 容 , 相 当 于 Canvas 的 
背景 ,调用 这 三 个 方法 也 不 会 影响 Context 绘图 的 起 点 。 

要 清除 Canvas 上 的 所 有 内 容 时 ,可 以 调用 context. clearRect(0,0, width,height) 来 
直接 清除 ,而 不 需要 使 用 路 径 方 法 绘制 一 个 与 Canvas 同等 大 小 的 矩形 路 径 , 再 使 用 fill 
方法 去 清除 。 


4. 图 形 绘 制 的 风格 设置 属性 
Context 对 象 还 提供 了 相应 的 属性 来 调整 线条 及 填充 风格 ,如 表 8-2 所 示 。 
表 8-2 图 形 绘制 的 风格 设置 属性 及 含义 








属性 名 称 使 用 说 明 
用 于 设置 线条 的 颜色 ,默认 为 #000000。 其 值 可 以 设置 为 CSS 颜色 值 , 渐 变 对 象 或 者 
strokeStyle 
模式 对 象 
fillStyle 用 于 设置 填充 的 颜色 ,默认 为 #000000。 与 strokeStyle 一样 , 值 也 可 以 设置 为 CSS 颜 
色 值 渐变 对 象 或 者 模式 对 象 





lineWidth 用 于 设置 线条 的 宽度 ,单位 是 像素 (px) ,默认 为 1.0 


用 于 设置 线条 的 端点 样式 ,有 butt( 无 ) ,round( 圆 头 ) square( 方 头 ) 三 种 类 型 可 供 选 
择 , 默 认为 butt 


用 于 设置 线条 的 转折 处 样式 ,有 round( 圆 角 ) 、bevel( 平 角 ) .miter( 尖 角 ) 三 种 类 型 可 供 
选择 ,默认 为 miter 


miterLimit ”| 用 于 设置 线条 尖 角 折 角 的 锐利 程序 ,默认 为 10 








lineCap 





lineJoin 
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5. 绘制 矩形 


Context 对 象 拥有 3 个 方法 可 以 直接 在 画布 上 绘制 图 形 而 不 需要 路 径 ,可 以 将 其 视 
为 直接 在 画布 背景 中 绘制 。 这 3 个 方法 的 原型 如 下 。 

1) void fillRect(left,top,width, height) 

用 于 使 用 当前 的 fillStyle (默认 为 #000000, 即 黑色 ) 样 式 填充 一 个 左上 角 顶 点 在 
(left，top) 处 、 宽 为 width、 高 为 height 的 和 矩形。 

2) void strokeRect(left,top ,width,height) 

用 于 使 用 当前 的 线条 风格 绘制 一 个 左上 角 顶 点 在 (left,top) 处 、 宽 为 width 、 高 为 
height 的 矩形 边框 。 

3) void clearRect(left,top, width ,height) 

用 于 清除 左上 角 顶 点 在 (left,top) 处 、 宽 为 width 高 为 height 的 矩形 区 域内 的 所 有 
内 容 。 

通过 fillStyle 和 strokeStyle 属性 可 以 轻松 地 设置 矩形 的 填充 和 线条 ,通过 fillRect() 
方法 可 以 绘制 带 填 充 的 矩形 ,使 用 strokeRect() 方 法 可 以 绘制 只 有 边框 没有 填充 的 矩形 。 
如 果 想 清除 部 分 Canvas, 可 以 使 用 clearRect() 方 法 。 上 述 三 个 方法 的 参数 相同 , 即 x、y、 
width height。 前 两 个 参数 设 定 (x,y) 坐 标 ,后 两 个 参数 设置 矩形 的 高 度 和 宽度 。 可 以 使 
用 lineWidth 属性 改变 线条 的 粗细 。 


绘制 矩形 的 示例 代码 如 下 : 
context.fil1Style = "#00f"'; // blue 
context .strokeStyle = '#f£00"'; // red 


context .lineWidth =4; 
context.fillRect (0, 0, 150, 50); 
context .strokeRect (0, 60, 150, 50); 
context .clearRect (30, 25, 90, 60); 
context .strokeRect (30, 25, 90, 60); 


6. 绘制 任意 形状 


在 简单 的 矩形 不 能 满足 需求 的 情况 下 ,绘图 环境 提供 了 通过 Canvas 路 径 (path) 绘 制 
复杂 的 形状 或 路 径 的 方法 。 可 以 先 绘制 轮廓 ,然后 绘制 边框 和 填充 。 使 用 beginPath() 方 
法 开始 绘制 路 径 ,然后 使 用 moveTo() ,lineTo() ,arc() 方 法 创建 线段 。 绘 制 完 毕 使 用 
stroke() 方 法 或 fill() 方 法 即 可 添加 填充 或 者 设置 边框 。 使 用 fill() 方 法 会 自动 闭合 所 有 
未 闭合 路 径 。 使 用 closePath( ) 方 法 结束 绘制 并 闭合 形状 (可 选 ) 。 

绘制 三 角形 的 示例 代码 如 下 : 


Context.fil1Style= "#00f"; 
context .strokeStyle= '# f00"7 
context.lineWidth= 47 
context .beginPath (); 
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Context.moveTo (10, 10); 
context.lineTo (100, 10); 
context.lineTo (10, 100); 
context.lineTo (10, 10); 
context .fill (); 

context .stroke (); 


context .closePath () 7 


7. 绘制 文字 


在 绘图 环境 中 提供 了 两 种 方法 在 Canvas 中 绘制 文字 。 

(1) strokeText(text,x,y,[maxWidth ]) 

在 (x,y) 处 绘制 只 有 strokeStyle 边框 的 空心 文本 。 

(2) fillText(Ctext,x,y,[maxWidth]) 

在 (x,y) 处 绘制 带 fillStyle 填充 的 实心 文本 。 

两 者 的 参数 相同 : 要 绘制 的 文字 和 文字 的 位 置 为 (x,y) 坐 标 。 还 有 一 个 可 选 选 
项 一 一 最 大 宽度 。 如 果 需 要 ,浏览 器 会 缩减 文字 以 让 它 适 应 指定 宽度 。 文 字 对 齐 属 性 影 
响 文字 与 设置 的 (x,y) 坐 标的 相对 位 置 。 

可 以 通过 改变 context 对 象 的 font 属性 来 调整 文字 的 字体 以 及 大 小 ,默认 为 “10px 
Sans-serif”。 

Context 对 象 可 以 设置 以 下 text 属性 。 

(1) font: 文字 字体 。 

(2) textAlign: 文字 的 水 平 对 齐 方式 ,可 取 属 性 值 为 start、end,left,right 和 center。 
默认 值 为 start。 

(3) textBaseline: 文字 的 竖 直 对 齐 方 式 , 可 取 属 性 值 为 top、hanging、middle、alphabetic、 
ideographic、bottom。 默 认 值 为 alphabetic。 

在 Canvas 中 绘制 hello world 文字 的 示例 代码 如 下 : 


context.fillSstyle= "#00f";» 

context .font = "italic 30px sans- serif'7 
context .textBaseline = "top'7 
context.fillText ('Hello world!', 0, 0); 
context .font= 'bold 30px sans- serif'7 
context.strokeText ('Hello world!', 0, 50); 


8. 设置 阴影 效果 


Shadows API 的 属性 如 下 。 
(1) shadowColor: 用 于 设置 阴影 颜色 ,其 值 和 CSS 颜色 值 一 致 。 
(2) shadowBlur: 用 于 设置 阴影 的 模糊 程度 ,此 值 越 大 ,阴影 越 模糊 。 其 效果 和 
Photoshop 的 高 斯 模糊 滤 镜 相同 。 
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(3) shadowOffsetX 和 shadowOffsetY: 用 于 设置 阴影 的 x 和 y 偏 移 量 , 单 位 是 
像素 。 
设置 Canvas 阴影 效果 的 示例 代码 如 下 : 


Context.shadowOffsetX =5; 
Context.shadowOffsetY =5; 
Context.shadowB]ur =4; 
Context.shadowColor= 'rgba (255, 0, 0, 0.5)"'; 
context .fillStyle = "#00f"; 
context.fillRect (20, 20, 150, 100); 


9. 设置 颜色 渐变 


除了 CSS 颜色 ,fillStyle 和 strokeStyle 属性 可 以 设置 为 CanvasGradient 对 象 ,通过 
CanvasGradient 可 以 为 线条 和 填充 使 用 颜色 渐变 。 若 创建 CanvasGradient 对 象 ,可 以 使 
用 createLinearGradient() 和 createRadialGradient() 两 个 方法 。 前 者 创建 线性 颜色 渐变 ， 
后 者 创建 圆 形 颜色 渐变 。 创 建 颜色 渐变 对 象 后 ,可 以 使 用 对 象 的 addColorStop() 方 法 添 
加 颜色 中 间 值 。 

使 用 指定 的 颜色 来 绘制 渐变 背景 的 示例 代码 如 下 : 


< Script type= "text/UavaScript"> 
Var c=document .getElementById ("myCanvas"); 
Var context=c.getContext ("2d"); 
Var grd= context .createLinearGradient (0, 0,175, 50); 
grd.addcolorstop (0, "#FF0000"); 
grd.addColorstop (1, "#00FF00"); 
context .fillSstyle=grd; 
context .fillRect (0,0,175, 50); 


</script> 


10. 绘制 图 片 


Context 对 象 中 拥有 drawImage() 方 法 ,可 以 将 外 部 图 片 绘制 到 Canvas 中 。 
drawImage() 方 法 的 3 种 原型 如 下 : 

(1) drawImage(image,dx,dy); 

(2) drawImage(Cimage,dx,dy,dw,dh); 

(3) drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); 

其 中 , image 参数 可 以 是 HTMLImageElement、HTMLCanvasElement 或 者 
HTMLVideoElement。 第 3 种 原型 中 的 sx、sy 在 前 两 个 中 均 为 0,sw、sh 均 为 image 
本 身 的 宽 和 高 ;第 2 种 和 第 3 种 原型 中 的 dw、dh 在 第 1 个 中 也 均 为 image 本 身 的 宽 
和 高 。 
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11. SVG 


HTML5 支持 内 联 SVG。SVG 指 可 伸缩 矢量 图 形 (Scalable Vector Graphics) , 它 是 
万 维 网 联盟 的 标准 ,用 于 定义 用 于 网 络 的 基于 矢量 的 图 形 ,并 使 用 XML 格式 定义 图 形 。 
在 放大 或 改变 尺寸 的 情况 下 ,SVG 图 形 质量 不 会 有 损失 。 

1) 使 用 SVG 图 像 的 优势 

与 其 他 图 像 格 式 相 比 (例如 JPEG 和 GIF) ,使 用 SVG 的 优势 在 于 : 

(1) SVG 图 像 可 通过 文本 编辑 器 来 创建 和 修改 。 

(2) SVG 图 像 可 被 搜索 .索引 、 脚 本 化 或 压缩 。 

(3) SVG 图 像 是 可 伸缩 的 。 

(4) SVG 图 像 可 在 任何 的 分 辩 率 下 被 高 质量 地 打印 。 

(5) SVG 可 在 图 像 质量 不 下 降 的 情况 下 被 放大 。 

在 HTML5 中 ,可 以 将 SVG 元 素 直接 嵌入 HTML 页 面 中 ,示例 代码 如 下 : 


< !DOCTYPE html> 
<html> 
<body> 
<svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" height= "190"> 
<polygon points= "100, 10 40,180 190, 60 10, 60 160,180" 
style="fill:lime;stroke:purple;stroke- width:5;fill- rule:evenodd;" /> 
</svg> 
< /body> 
</htm> 


2) 所 canvas 二 标签 和 SVG 以 及 VML 之 间 的 差异 

Canvas 和 SVG 都 允许 在 浏览 器 中 创建 图 形 , 但 是 它们 在 根本 上 是 不 同 的 。SVG 
是 一 种 使 用 XML 描述 2D 图 形 的 语言 ,SVG 基于 XML, 这 意味 着 SVG DOM 中 的 每 个 
元 素 都 是 可 用 的 ,可 以 为 某 个 元 素 附加 JavaScript 事件 处 理 器 。 在 SVG 中 ,每 个 被 绘制 
的 图 形 均 被 视 为 对 象 。 如 果 SVG 对 象 的 属性 发 生变 化 ,那么 浏览 器 能 够 自动 重 现 
图 形 。 

Canvas 通过 JavaScript 来 绘制 2D 图 形 ,Canvas 是 逐 像素 进行 泻 染 的 。 在 Canvas 中 
一 旦 图 形 被 绘制 完成 , 它 就 不 会 继续 得 到 浏览 器 的 关注 。 如 果 其 位 置 发 生变 化 ,那么 整个 
场景 也 需要 重新 绘制 ,包括 任何 可 能 已 被 图 形 覆 盖 的 对 象 。 

到 canvas 二 标签 和 SVG 以 及 VML 之 间 的 一 个 重要 区 别 是 : 过 canvas 之 有 一 个 基 
于 JavaScript 的 绘图 API, 而 SVG 和 VML 使 用 一 个 XML 文档 来 描述 绘图 。 这 两 种 方 
式 在 功能 上 是 等 同 的 ,任何 一 种 都 可 以 用 另 一 种 来 模拟 。 从 表面 上 看 它们 很 不 相同 ， 
可 是 ,每 一 种 都 有 强项 和 弱点 。 例 如 ,SVG 绘图 很 容易 编辑 ,只 要 从 其 描述 中 移 除 元 素 
就 行 。 要 从 同一 个 图 形 的 一 个 二 canvas 二 标记 中 移 除 元 素 ,往往 需 要 擦 掉 图 并 重新 绘 
制 它 。 
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【引导 训练 】 
任务 8-1 网 页 中 应 用 纯 CSS 绘制 
各 种 规则 图 形 
【任务 痢 述 】 


创建 网 页 0801. html, 在 该 网 页 中 定义 CSS 代码 、 编 写 HTML 代码 来 绘制 各 种 规则 
图 形 ,该 网 页 的 浏览 效果 如 图 8-3 所 示 。 


可 医 可 狂 
AV<P> 
OA 
AF 


图 8-3 网 页 0801. html 中 各 种 纯 CSS 绘制 的 规则 图 形 


【任务 吝 邦 】 


1. 创建 所 需 的 文件 夹 


在 文件 夹 “HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit08, 然 后 在 该 文件 夹 
中 创建 子 文件 夹 0801, 再 在 该 子 文件 夹 0801 中 创建 css 子 文件 夹 。 


2. 启动 Dreamweaver CC 
使 用 Windows 的 [开始] 菜单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 
3. 创建 本 地 站 点 和 网 页 


创建 1 个 名 称 为 “单元 8” 的 本 地 站 点 ,站 点 文件 夹 为 Unit08。 在 该 站 点 的 文件 夹 
0801 中 创建 网 页 0801. html。 


4. 定义 网 页 的 CSS 代码 


在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 8-3 所 示 。 
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表 8-3 网 页 0801. html 中 样式 文件 main. css 的 CSS 代码 定义 

















序号 CSS 代码 序号 CSS 代码 
001 | uli{ 047 
002 clear: left; 048 |#triangle- left { 
003 float: left; 049 width: Opx; 
004 |} 050 height: Opx; 
005 051 border- top: 50px solid transparent; 
006 | .shape{ 052 border—bottam: 50pg solid transparent; 
007 margin: 5px; 053 border- right: 100px solid blue; 
008| float: left; 054 |} 
009 |} 055 | 1i{ 
010 056 list- style- type: none; 
011 |#square { 057 | } 
012 width: 100px; 058 
013 | height: 100px; 059 | #triangle- right { 
014 background: blue; 060 width: Opx; 
015 |} 061 | height: Opx; 
016 062 border- top: 50px solid transparent; 
017 | # rectangle { 063 bordqer-bottam: 50pg solid transparent; 
018 width: 200px7 064 border- left: 100px solid blue; 
019 height: 100px; 065 | } 
020 background: blue; 066 
021 |} 067 |#oval { 
022 068 width: 200px; 
023 | #circle { 069 height: 100px; 
024 width: 100px; 070 background: blue; 
025 height: 100px; 071 —moz- border- radius: 100px/50px; 
026 background: blue; 072 —webkit—border- radius: 100px/50px; 
027 —moz- border- radius: 50px; 073 border- radius: 100px/50px7 
028 —Webkit- border- radius: 50px; 074 | } 
029 border- radius: 50px; 075 
030 | } 076 | #trapezoid { 
031 077 border- bottom: 100px solid blue; 
032 | #triangle-up { 078 border- left: 50px solid transparent; 
033 width: Opx; 079 border- right: 50px solid transparent; 
034 | height: Opx; 080| height: 0; 
035 border- left: 50px solid transparent; 081 width: 100px; 
036 | border- right: 50px solid transparent; 082 | } 
037 border- bottom: 100px solid blue; 083 
038 | } 084 | #triangle- leftbottom { 
039 085 width: Opx; 
040 | #triangle- down { 086| height: Opx; 
041 Width: Opx; 087 border- bottom: 100px solid blue; 
042 | height: Opx; 088 | ”border right: 100px solid transparent; 
043 | border- left: 50px solid transparent; 089 | } 
044 | ” border- right: 50px solid transparent; 090 
045 border- top: 100px solid blue; 091 | #triangle- rightbottom { 
046 | } 092 width: Opx; 
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续 表 

序号 CSS 代码 序号 CSS 代码 

093 | height: Opx; 101 | ” border right: 100px solid transparent; 

094 border- bottom: 100px solid blue; 102 |} 

095 border- left: 100px solid transparent; 103 | #triangle- topright { 

096 |} 104 WwWidth: Opx; 

097 |#triangle- topleft { 105 height: Opx; 

098 width: Opx; 106 border- top: 100px solid blue; 

099 height: Opx; 107 border- left: 100px solid transparent; 

100 border- top: 100px solid blue; 108 | } 














5. 编写 网 页 0801. html 的 HTML 代码 


切换 到 网 页 文档 0801. html 的 5 代码 了 视图 ,在 标签 "过 /head> ”的 前 面 输入 链接 外 部 
样式 表 的 代码 如 下 : 


<link type= "text/css" rel= "stylesheet" href= "css/main.css"/> 
然后 输入 表 8-4 所 示 的 HTML 代码 。 


表 8-4 网 页 0801.html 的 HTML 代码 





序号 HTML 代码 
01 <ul> 
02 <1i class="shape"><div id="square">< /div>< /li> 
03 <1i class="shape"><div id="rectangle"></div></li> 
04 <1i class="shape"><div id="circle">< /div></1i> 
05 </ul> 
06 <ul> 
07 <1i class= "shape"><div id="triangle- up">< /div></li> 
08 <1i class="shape"><div id="triangle- down">< /div></li> 
09 <1i class="shape"><div id="triangle- left"></div></li> 
10 <1i class="shape"><div id="triangle- right"></div></li> 
11 </ul> 
还 <ul> 
13 <1i class="shape"><div id="oval"></div></li> 
14 <1i class="shape"><div id= "trapezoid">< /div>< /li> 
15 </ul> 
16 <ul> 
17 <1i class="shape"><div id="triangle- leftbottom">< /div></li> 
18 <1i class= "shape"><div id="triangle- rightbottom">< /div></li> 
329 <1i class= "shape"><div id="triangle- topleft"></div></li> 
20 <1i class="shape"><div id="triangle- topright">< /div>< /li> 
21 </ul> 





6. 保存 与 浏览 网 页 


保存 网 页 0801. html, 其 浏览 效果 如 图 8-3 所 示 。 
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任务 8-2 网 页 中 应 用 纯 CSS 绘制 各 种 特色 图 形 


【任务 锚 太 】 


创建 网 页 0802. html, 在 该 网 页 中 定义 CSS 代码 ,编写 HTML 代码 绘制 各 种 特色 图 
形 , 该 网 页 的 浏览 效果 如 图 8-4 所 示 。 


人 各 日 避 


Takeda Akiyama Baba lto 
图 8-4 网 页 0802. html 中 各 种 纯 CSS 绘制 的 特色 图 形 


【任务 吝 施 】 


1. 创建 所 需 的 文件 夹 和 网 页 


在 文件 夹 Unit08 中 创建 子 文件 夹 0802, 再 在 子 文件 夹 0802 中 创建 css 子 文件 夹 。 
然后 在 子 文件 夹 0802 中 创建 网 页 0802. html。 


2. 定义 网 页 的 CSS 代码 
在 文件 夹 CSS 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 8-5 示 。 
表 8-5 网 页 0802. html 中 样式 文件 base. ess 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 |body{ 14 .Crest { 
02 width: 600px7 15 Position: relative; 
03 margin: 20px auto; 16 background: white; 
04 background: #eee; 17 width: 100px; 
05 font- family: 'Roboto', sans- serif; 18 height: 100px; 
06 text- align: center; 19 border- radius: 4px; 
07 } 20 box- sizing: border- box; 
08 21 box- shadow: 0 3 4 rgba(0, 0, 0, 0.3); 
09 .Crest— holder { 22 } 
10 float: left; 23 .Crest-name { 
2 margin: 10px; 24 line- height: 40px; 
12 text- align: center; 25 font- family: 'Oswald', sans- serif; 
EE | 26 |} 
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在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 8-6 
所 示 。 


表 8-6 网 页 0802. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
001 | .crest .circle { 044 | } 

002 border- radius: 50%; 045 

003 |} 046 | .crest.akiyama .diamond { 
004 047 position: relative; 

005 | .crest.takeda { 048 margin: 0 auto; 

006 pagdding: 27px; 049 background: black; 

007 |} 050 transformm: rotate (- 45deg) skew(l4deg, 
008 051 14deg); 

009 | .crest.takeda .wrap { 052 |} 

010 position: relative; 053 

011 width: 100%; 054 | .crest.akiyama .diamond:nth- hild(1) { 
012 height: 100%; 055 width: 20px; 

013 |} 056 | height: 20px; 

014 057 margin- bottom: - 12px; 
015 | .crest.takeda .diamond { 058 |} 

016 position: absolute; 059 | .crest.akiyama .diamond:nth- hild(2) { 
017 left: 14px; 060 width: 28px; 

018 | width: 19px; 061 | height: 28px; 

019 height: 19px; 062 margin- bottom: — 18px; 
020 background: black; 063 |} 

021 transform: rotate (- 45deg) skew 064 

022 (12deg, 12deg); 065 | .crest.akiyama .diamond:nth- hild(3) { 
023 |} 066 width: 35px; 

024 067 | height: 35px; 

025 | .crest.takeda .diamond:nth- child(2) { 068 |} 

026 margin- top: 26px; 069 

027 |} 070 | .crest.baba { 

028 071 padding: 19Ppx; 

029 | .crest.takeda .diamond:nth- child(3) { 072 |} 

030 | margin- left: -20px; 073 

031 |} 074 | .crest.baba .circle { 

032 075 width: 46px; 

033 | .crest.takeda .diamond:nth- child(4) { 076 height: 46px; 

034 margin- left: 20px; 077 border: 8px solid black; 
035 |} 078 |} 

036 079 

037 | .crest.takeda .diamond:nth- child(3), 080 | .crest.baba .line { 

038 | .crest.takeda .diamond:nth- child(4) { 081 position: absolute; 

039 margin- top: 13px; 082 left: 50%; 

040 |} 083 top: 50% 了 

041 084 margin: -13px 0 0 - 23px; 
042 | .crest.akiyama { 085 width: 46px; 

043 padding: 22px; 086 height: 26px; 
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续 表 

序号 CSS 代码 序号 CSS 代码 
087 border: 8px solid black; 102 background: black; 
088 border- left: 0; 103 |} 
089 border- right: 0; 104 | .crest.ito .circle:nth- child(2) { 
090 box- sizing: border- box; 105 width: 40px; 
091 |} 106 height: 40px; 
092 107 margin: — 30px 0 0 — 20px; 
093 | .crest.ito .circle { 108 background: white; 
094 position: absolute; 109 |} 
095 top: 50%; 110 
096 left: 50%; 111 | .crest.ito .circle:nth- child(3) { 
097 |} 112 width: 14px; 
098 | .crest.ito .circle:nth- child(1) { 113 height: 14px; 
099 width: 56px; 114 margin: -30px 0 0 - 7px; 
100 height: 56px; 115 background: black; 
101 | margin: -28px 0 0 -28px; 116 |} 

3. 编写 网 页 0802. html 的 HTML 代码 


切换 到 网 页 文档 0802. html 的 [代码 视图 ,在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 
样式 表 的 代码 如 下 : 


<1link href= "css/base.css" rel= "stylesheet" type= "text/css"> 


<link href="css/main.css" rel= "stylesheet" type= "text/css"> 


然后 输入 表 8-7 所 示 的 HTML 代码 。 


表 8-7 网 页 0802. html 的 HTML 代码 





序号 HTML 代码 
01 <div class= "crest- holder"> 
02 <div class= "crest takeda"> 
03 <div class= "wrap"> 
04 <div class= "diamond">< /div> 
05 <div class= "diamond">< /div> 
06 <div class= "diamond">< /div> 
07 <div class= "diamond">< /div> 
08 </div> 
09 </div> 
10 <div class= "crest- name"> Takeda< /div> 
11 </div> 
i2 
<div class= "crest- holder"> 
14 <div class= "crest akiyama"> 
15 <div class= "wrap"> 
16 <div class= "diamond">< /div> 
17 <div class= "diamond">< /div> 
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续 表 

序号 HTML 代码 

18 <div class= "diamond">< /div> 

19 </div> 

20 </div> 

2 <div class= "crest— name"> Akiyama< /div> 

2 </div> 

23 

24 <div class= "crest- holder"> 

25 <div class= "crest baba"> 

26 <div class= "wrap"> 

27 <div class= "circle"></div> 

28 <div class="line">< /div> 

29 </div> 

30 </div> 

31 <div class= "crest- name"> Baba< /div> 

32 </div> 

33 

34 <div class= "crest- holder"> 

35 <div class= "crest ito"> 

36 <div class= "wrap"> 

37 <div class= "circle"></div> 

38 <div class="circle">< /div> 

39 <div class="circle">< /div> 

40 </div> 

41 </div> 

42 <div class= "crest- name"> Ito< /div> 

43 </div> 


4. 保存 与 浏览 网 页 
保存 网 页 0802. html, 其 浏览 效果 如 图 8-4 所 示 。 


任务 8-3 网 页 中 应 用 carvas 元素 绘制 


各 种 图 形 和 文字 


【任务 描述 】 


(1) 在 网 页 中 应 用 canvas 元 素 绘制 如 图 8-5 一 图 8-7 所 示 的 各 种 图 形 。 


图 8-5 网 页 中 应 用 canvas 元 素 绘制 空心 正方 形 的 浏览 效果 
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EE 


图 8-6 网 页 中 应 用 canvas 元 素 绘制 多 个 长 方形 的 浏览 效果 


图 8-7 网 页 中 应 用 canvas 元 素 绘制 多 个 不 同形 状 图 形 的 浏览 效果 


(2) 在 网 页 中 应 用 canvas 元 素 绘制 图 8-8 所 示 的 各 种 文字 。 
Good luck 


Good luck 
名 您 好 么 
图 8-8 网 页 中 应 用 canvas 元 素 绘制 各 种 文字 的 浏览 效果 


(3) 在 网 页 中 应 用 canvas 元 素 绘制 如 图 8-9 所 示 的 各 种 图 像 。 


三 使 用 drawlmage 方 法 绘制 图 从 














EE 





图 8-9 网 页 中 应 用 canvas 元 素 绘制 各 种 图 像 的 浏览 效果 
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【任务 名 施 】 


1. 绘制 一 个 空心 正方 形 


在 文件 夹 Unit08 中 创建 子 文件 夹 0803, 然 后 在 子 文件 夹 0803 中 创建 网 页 0803. 
html。 

canvas 元 素 是 HTML5 中 一 个 用 于 绘图 的 重要 元 素 , 从 字面 上 理解 canvas 是 画布 的 
意思 ,在 页 面 上 增加 一 个 canvas 元 素 就 相当 于 在 网 页 中 添加 一 块 画布 ,之 后 就 可 以 利用 
一 些 绘图 指令 在 “画布 ?上 绘制 各 种 图 形 。 

在 网 页 0803. html 中 添加 HTML 代码 ,声明 一 个 宽度 为 400px、 高 度 为 300px 的 画 
布 ,HTML 代码 如 下 : 

< canvas id= "myCanvas" width= "400px" height= "300px" style= "background- color:#ccc"> 


</canvas> 


其 浏览 效果 如 图 8-10 所 示 。 





图 8-10 ”宽度 为 400px、 高 度 为 300px 的 画布 


二 canvas 二 标签 只 是 图 形容 器 ,还 必须 使 用 脚本 来 绘制 图 形 。 
在 文件 夹 0803 中 创建 网 页 080301. html, 在 网 页 080301. html 中 编写 HTML 代码 
及 相关 的 JavaScript 来 绘制 一 个 空心 正方 形 , 代 码 如 表 8-8 所 示 。 


表 8-8 在 网 页 080301. html 中 绘制 一 个 空心 正方 形 的 代码 








序号 代 码 
01 < !DOCTYPE html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title> HTML5 绘制 图 形 < /title> 
06 < /head> 
07 <body> 
08 <canvas id= "tCanvas"> 
09 < 二 -如果 浏 览 器 不 支持 则 显示 如 下 字体 --> 提 示 :你 的 浏览 器 不 支持 <!--<canvas>--> 
10 标签 
11 </canvas> 
讼 < script type= "text/javascript" charset= "utf- 8"> 
| 
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续 表 
序号 代 码 
14 { 
15 // 获 取 canvas 对 象 的 引用 。 注 意 tcanvas 的 名 字 必 须 和 对 应 canvas 的 id 相同 
16 Var canvas =document .getElementById('tCanvas'); 
17 // 获 取 该 canvas 的 2D 绘 图 环境 
18 Var context =canvas.getContext ('2d'); 
19 // 绘 制 代码 将 出 现在 这 里 
20 // 画 一 个 空心 正方 形 
2 Context.strokeRect (10,10,40,40)7 
22 } 
23 </script> 
24 < /body> 
25 </htm> 





保存 网 页 080301. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 8-5 所 示 。 
2. 绘制 多 个 长 方形 


在 文件 夹 0803 中 创建 网 页 080302. html。 在 网 页 080302. html 中 编写 HTML 代码 
及 相关 的 JavaScript 来 绘制 多 个 长 方形 ,代码 如 表 8-9 所 示 。 


表 8-9 在 网 页 080302. html 中 绘制 多 个 长 方形 的 代码 





序号 代 码 
01 <canvas id="tCanvas" > 
02 <!-- 如 果 浏览 器 不 支持 则 显示 如 下 字体 --> 
03 提示 :你 的 浏览 器 不 支持 <!--<canvas>--> 标 签 
04 < /canvas> 
05 < script type= "text/javascript" charset ="utf- 8"> 
06 // 获 取 canvas 对 象 的 引用 ,注意 tcanvas 的 名 字 必 须 和 canvas 对 应 的 ia 相同 
07 Var canvas =document .getElementById('tCanvas'); 
08 // 获 取 该 canvas 的 2D 绘 图 环境 
09 Var context =canvas.getContext ('2d"'); 
10 // 设 置 填充 颜色 为 红色 
11 context .fillSstyle ="red"; 
12 // 画 一 个 红色 的 实心 矩形 
了 3 context.fillRect(10,10,100,40)7 
14 // 设 置 边 线 颜色 为 绿色 
15 context .strokestyle = "green"; 
16 // 画 一 个 绿色 空心 矩形 
3 context .strokeRect (120, 10, 100, 35); 
18 // 使 用 rgb 0) 设置 填充 颜色 为 蓝 色 
19 Context.fil1Style = "rgb (0,0,255) "7 
20 // 画 一 个 蓝 色 的 实心 矩形 
2 context .fillRect (10, 60, 100, 50); 
2 // 设 置 填充 色 为 黑色 且 alpha 值 (透明 度 ) 为 0.2 
23 context .fillstyle = "rgba(0,0,0,0.2) "7 
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续 表 
序号 代 码 
24 // 画 一 个 透明 的 黑色 实心 矩形 
25 context .fillRect (120, 60, 100, 50); 
26 </script> 





保存 网 页 080302. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 8-6 所 示 。 


3. 绘制 多 个 不 同形 状 的 图 形 


在 文件 夹 0803 创建 网 页 080303. html, 在 网 页 080303. html 中 编写 HTML 代码 及 
相关 的 JavaScript 来 绘制 多 个 不 同形 状 的 图 形 , 绘 制 不 同形 状 图 形 对 应 的 JavaScript 代 
码 如 表 8-10 所 示 。 


表 8-10 在 网 页 080303. html 中 绘制 多 个 不 同形 状 图 形 对 应 的 JavaScript 代码 


序号 代 码 
01 < Script type= "text/javascript" charset= "utf- 8"> 
02 Var canvas =document .getElementById('tCanvas'); 
03 Var context =canvas.getContext ('2d"'); 





04 // 绘 制 三 角形 

05 context .beginPath (); 

06 | context.moveTo(10,10); // 从 (10,10) 开 始 

07 | context.lineTo(10,70); // 表 示 从 (10,10) 开 始 , 画 到 (10,70) 结 束 
08 | context.lineTo(110,40); // 表 示 从 (10,70) 开 始 , 画 到 (110, 40) 结 束 
09 | context.fill(); // 闭 合 形状 并 且 以 填充 方式 绘制 出 来 


10 | // 三 角形 的 外 边框 

FE context .beginPath (); 

12 | context.moveTo(110,50); // 从 点 (110,50) 开 始 
13 context.lineTo (110,110) 7 

14 context .lineTo (10,80)7 

15 context .closePath (); // 关 闭路 径 

16 context .stroke ()7 // 以 空心 填充 

17 “| /4 绘制 一 个 复杂 的 多 边 形 

18 context .beginPath () 7 

19 | context.moveTo (140,40) // 从 点 (140,40) 开 始 
20 context .LineTo (150, 100); 

21 context .lineTo (220, 90); 

22 context .lineTo (240, 50); 

23 context .lineTo (170,20); 

24 Context.closePath () 7 

25 Context.stroke () 7 

26 “| // 绘 制 半圆 弧 

27 context .beginPath (); 

28 “| // 在 (100,300) 处 逆 时 针 画 一 个 半径 为 40、 角 度 为 0~ 180 的 弧 线 
29 | context.arc(60,170,40,0* Math.PI,1* Math.PI,true); //PI 的 弧度 是 180” 
30 Context.stroke ()7 
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续 表 

序号 代 码 

31 “| // 画 一 个 实心 圆 

2 context .beginPath(); 

33 // 在 (60,170) 处 道 时 针 画 一 个 半径 为 30、 角 度 为 0~ 360 的 弧 

34 context .arc (60,170, 30,0* Math.PI,2* Math.PI,true);//2* Math.PI 是 360? 

35 context .fill(); 

36 | // 画 一 个 3/4 弧 

37 context .beginPath () 7 

38 | // 在 (180,160) 处 顺 时 针 画 一 个 半径 为 40、 角 度 为 0~ 270 的 弧 

39 context .arc (180, 160, 40, 0* Math.PI,3/2* Math.PI, false); 

40 context .stroke (); 

41 </script> 





保存 网 页 080303. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 8-7 所 示 。 


4. 


绘制 多 个 不 同 大 小 和 字体 的 文字 


在 文件 夹 0803 中 创建 网 页 080304. html, 在 网 页 080304. html 中 编写 HTML 代码 
及 相关 的 JavaScript 来 绘制 多 个 不 同 大 小 和 字体 的 文字 ,绘制 多 个 不 同 大 小 和 字体 文字 
对 应 的 JavaScript 代码 如 表 8-11 所 示 。 


表 8-11 在 网 页 080304. html 中 绘制 多 个 不 同 大 小 和 字体 文字 对 应 的 JavaScript 代码 





序号 代 码 
01 <Script type= "text/javascript" charset= "utf- 8"> 
02 // 获 取 canvas 对 象 的 引用 ,注意 tcanvas 的 名 字 必 须 和 canvas 对 应 的 id 相同 
03 Var canvas =document .getElementById('tCanvas'); 
04 // 获 取 该 canvas 的 2D 绘 图 环境 
05 Var context =canvas .getContext("2d")7 
06 // 绘 制 文本 
07 context .fillText ('Good luck", 20,30); 
08 // 修 改 字体 
09 context .font = '20px Arial'; 
10 context .fillText ('Good luck', 20, 60); 
也 /4 绘制 空心 的 文本 
12 context .font = '36px 隶书 ' 
13 context .strokeText (' 祝 您 好 运 ',20,100); 
14 </script> 





保存 网 页 080304. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 8-8 所 示 。 


5. 


绘制 图 像 


在 文件 夹 0803 中 创建 网 页 080305. html, 在 网 页 080305. html 中 编写 HTML 代码 
及 相关 的 JavaScript 来 绘制 图 像 , 代 码 如 表 8-12 所 示 。 
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表 8-12 在 网 页 080305. html 中 绘制 图 像 的 代码 








序号 代 码 
01 | <!aoctype html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title> HTML5 绘制 图 像 < /title> 
06 < script type= "text/JavaScript" charset= "utf- 8"> 
07 function draw (i) 
08 { 
09 Var canvas =document .getElementById ("myCanvas"); 
10 Var context =canvas .getContext ("2d"); 
11 var image =new Image (); 
12 image.src= "cat .jpg"; 
13 image .onload = function () 
14 
15 fte=sy 
16 context .drawImage (image, 0,0); 
17 else if(i==2) 
18 context .drawImage (image, 500, 0, 200, 300); 
1 else 
2 context.drawImage (jmage,30,30,440,400,700,0,160,180) 7 
2: } 
22 3 
23 </script> 
24 < /head> 
25 <body> 
26 <fieldset> 
六 <legend> 使 用 drawImage 方 法 画图 像 </legend> 
28 <canvas id= "myCanvas" width= "850px" height="600px">< /canvas> 
29 <br> 
30 <button onclick= "draw (1)"> 原 图 < /button> 
31 <button onclick= "draw (2) "> 缩放 图 < /button> 
32 <button onclick= "draw (3) "> 切割 图 < /button> 
33 </fieldset> 
34 < /body> 
35 </html> 


保存 网 页 080305. html, 在 浏览 器 Google Chrome 中 浏览 该 网 页 ,然后 依次 单 击 【 原 
图 】\【 缩 放 图 】【 切 制图 ] 按 钮 ,分 别 浏览 原 图 、 缩 放 图 、 切 割 图 ,如 图 8-9 所 示 。 


任务 8-4 网 页 中 绘制 菊花 图 形 


【任务 模 述 】 


创建 网 页 0804. html, 在 该 网 页 中 绘制 菊花 图 形 , 浏 览 效 果 如 图 8-11 所 示 。 
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图 8-11 在 网 页 0804. html 中 绘制 菊花 图 形 后 的 浏览 效果 


【任务 忌 施 】 


在 文件 夹 Unit08 中 创建 子 文 件 夹 0804, 然 后 在 子 文件 夹 0804 中 创建 网 页 0804. 


html。 在 该 网 页 中 添加 的 HTML 代码 如 下 : 


<canvas id= "tCanvas"> < /canvas> 


在 网 页 0804. html 中 绘制 菊花 图 形 的 JavaScript 代码 如 表 8-13 所 示 。 
表 8-13 在 网 页 0804. html 中 绘制 菊花 图 形 的 JavaScript 代码 





序号 JavaScript 代码 
01 <script type= "text/javascript" charset= "utf- 8"> 
02 Var canvas =document .getElementById ("tCanvas"); 
03 Var context =canvas .getContext ("2d"); 
04 varn=0; 
05 Var dx =150; 
06 Var dy =150; 
07 var s =100; 
08 context .beginPath () 7 
09 context .fillStyle = "rgb (100, 255, 100) '; 
10 context .strokeStyle = 'rgb (0, 0,100) "7 
a var x =Math.sin(0); 
玲 Var y =Math.cos (0); 
13 var dig =Math.PI / 15 * 11; 
14 for (var i =0; i <30; i++) { 
15 var x=Math.sin(i * dig); 
16 vary =Math.cos(i * dig); 
17 context.lineTo(dx +x * s, dy +y * s); 
18 } 
19 context .closePath () 7 
20 Context.fill()7 
21 Context .stroke ()7 
22 </script> 





保存 网 页 0804. html, 在 浏览 器 Google Chrome 中 的 浏览 效果 如 图 8-11 所 示 。 
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【同步 训练 】 
任务 8-5 网 页 中 绘制 阴阳 图 和 五 角 星 


创建 网 页 0805. html, 在 该 网 页 中 应 用 CSS3 绘制 阴阳 图 和 五 角 星 ,其 浏览 效果 如 


图 8-12 所 示 。 


图 8-12 在 网 页 0805. html 中 应 用 CSS3 绘制 的 阴阳 图 和 五 角 星 的 浏览 效果 





提示 : 请 扫描 二 维 码 浏 览 提 示 内 容 。 





任务 8-6 网 页 中 绘制 多 种 图 形 和 图 片 
(1) 创建 网 页 080601. html, 在 该 网 页 中 绘制 如 图 8-13 所 示 的 各 种 图 形 。 
图 8-13 在 网 页 080601. html 中 绘制 多 个 实心 和 空心 方形 的 浏览 效果 
(2) 创建 网 页 080602. html, 在 该 网 页 中 绘制 如 图 8-14 所 示 的 各 种 图 形 。 
(3) 创建 网 页 080603. html, 在 该 网 页 中 绘制 如 图 8-15 所 示 的 图 像 。 
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图 8-14 在 网 页 080602. html 中 绘制 圆 图 8-15 在 网 页 080603. html 中 绘制 
和 弧 的 浏览 效果 图 像 的 浏览 效果 


提示 , 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 】 


1. 在 网 页 中 绘制 多 个 五 角 星 


创建 网 页 0807. html, 在 该 网 页 中 绘制 多 个 五 角 星 ,网 页 0807. html 在 浏览 器 Google 
Chrome 中 的 浏览 效果 如 图 8-16 所 示 。 








图 8-16 在 网 页 0807. html 中 绘制 多 个 五 角 星 的 浏览 效果 


2. 网 页 中 绘制 精美 挂钟 


创建 网 页 0808. html, 在 该 网 页 中 绘制 精美 挂钟 ,网 页 0808. html 中 精美 挂钟 的 浏览 
效果 如 图 8-17 所 示 。 





图 8-17 在 网 页 0808. html 中 绘制 精美 挂钟 的 浏览 效果 
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【问题 探究 】 


【问题 1】 HTMLS 绘图 的 颜色 ,样式 和 阴影 属性 有 了 哪些 ? 
HTML5 绘图 的 颜色 、 样 式 和 阴影 属性 如 表 8-14 所 示 。 


表 8-14 HTMLS 绘图 的 颜色 样式 和 阴影 属性 




















属性 名 称 属性 描述 
fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 渐变 或 模式 
strokeStyle 设置 或 返回 用 于 笔触 的 颜色 .渐变 或 模式 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 
shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 距 形 状 的 水 平 距离 
shadowOffsetY 设置 或 返回 阴影 距 形 状 的 垂直 距离 





【问题 2】 HTMLS 创建 渐变 的 方法 有 哪些 ? 
HTML5 创建 渐变 的 方法 如 表 8-15 所 示 。 


表 8-15 HTMLS 创建 渐变 的 方法 

















方法 名 称 方法 描述 
createLinearGradient() 创建 线性 渐变 (用 在 画布 内 容 上 ) 
createPattern() 在 指定 的 方向 上 重复 指定 的 元 素 
createRadialGradient() 创建 放射 状 / 环 形 的 渐变 (用 在 画布 内 容 上 ) 
addColorStop() 规定 渐变 对 象 中 的 颜色 和 停止 位 置 


【问题 3】 HTMLS 的 线条 样式 属性 有 哪些 ? 
HTML5 的 线条 样式 属性 如 表 8-16 所 示 。 


表 8-16 ”HTMLS 的 线条 样式 属性 














属性 名 称 属性 描述 

lineCap 设置 或 返回 线条 的 结束 端点 样式 

lineJoin 设置 或 返回 两 条 线 相交 时 ,所 创建 的 拐角 类 型 
lineWidth 设置 或 返回 当前 的 线条 宽度 

miterLimit 设置 或 返回 最 大 斜 接 长 度 





【问题 4】 HTMLS 绘制 矩形 的 方法 有 哪些 ? 
HTML5 绘制 矩形 的 方法 如 表 8-17 所 示 。 


表 8-17 HTMLS 绘制 矩形 的 方法 








方法 名 称 方法 描述 
Tect() 创建 矩形 
fillRectO) 绘制 “被 填充 ”的 矩形 
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续 表 
方法 名 称 方法 描述 
strokeRect() 绘制 矩形 (无 填充 ) 
clearRect() 在 给 定 的 矩形 内 清除 指定 的 像素 
【问题 5】 HTMLS 创建 路 径 的 方法 有 哪些 ? 
HTML5 创建 路 径 的 方法 如 表 8-18 所 示 。 
表 8-18 HTMLS 创建 路 径 的 方法 
方法 名 称 方法 描述 
fillO 填充 当前 绘图 (路 径 ) 
stroke() 绘制 已 定义 的 路 径 
beginPath() 起 始 一 条 路 径 , 或 重 置 当前 路 径 
moveTo() 把 路 径 移 动 到 画布 中 的 指定 点 ,不 创建 线条 
closePath() 创建 从 当前 点 回 到 起 始点 的 路 径 
lineTo() 添加 一 个 新 点 ,然后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 
clip() 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
quadraticCurveTo() 创建 二 次 贝 塞 尔 曲线 
bezierCurveTo() 创建 三 次 方 贝 塞 尔 曲线 
arc() 创建 弧 /曲线 (用 于 创建 圆 形 或 部 分 圆 
arcTo() 创建 两 切线 之 间 的 弧 / 曲 线 
isPointInPath() 如 果 指 定 的 点 位 于 当前 路 径 中 , 则 返回 true, 否 则 返回 false 





【问题 6】 HTMLS 的 转换 方法 有 哪些 ? 
HTML5 的 转换 方法 如 表 8-19 所 示 。 


表 8-19 HTMLS 的 转换 方法 

















方法 名 称 方法 描述 
scale() 缩放 当前 绘图 至 更 大 或 更 小 
rotate() 旋转 当前 绘图 
translate() 重新 映射 画布 上 的 (0,0) 位 置 
transform() 替换 绘图 的 当前 转换 矩阵 





setTransform() 





将 当前 转换 重 置 为 单位 矩阵 ,然后 运行 transform() 


【问题 7】 HTMLS 的 文本 属性 有 哪些 ? 
HTML5 的 文本 属性 如 表 8-20 所 示 。 


表 8-20 HTMLS5 的 文本 属性 














属性 名 称 属性 描述 

font 设置 或 返回 文本 内 容 的 当前 字体 属性 
textAlign 设置 或 返回 文本 内 容 的 当前 对 齐 方式 
textBaseline 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 
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【问题 8】 HTMLS 的 文本 方法 有 哪些 ? 
HTML5 的 文本 方法 如 表 8-21 所 示 。 


表 8-21 HTMLS 的 文本 方法 











方法 名 称 方法 描述 
fillText() 在 画布 上 绘制 “被 填充 的 ”文本 
strokeText() 在 画布 上 绘制 文本 (无 填充 ) 
measureText() 返回 包含 指定 文本 宽度 的 对 象 





【问题 9】 HTMLS 的 绘制 图 像 方法 有 哪些 ? 
HTML5 的 绘制 图 像 方法 如 表 8-22 所 示 。 


表 8-22 HTML5 的 绘制 图 像 方法 


方法 名 称 方法 描述 
drawImage() 向 画布 上 绘制 图 像 .画布 或 视频 


【问题 10】 HTMLS 的 绘图 操作 属性 有 哪些 ? 
HTML5 的 绘图 操作 属性 如 表 8-23 所 示 。 


表 8-23 HTMLS 的 绘图 操作 属性 

















属性 名 称 属性 描述 
width 返回 ImageData 对 象 的 宽度 
height 返回 ImageData 对 象 的 高 度 
data 返回 一 个 对 象 ,其 包含 指定 的 ImageData 对 象 的 图 像 数据 


【问题 11】 HTMLS 的 绘图 操作 方法 有 哪些 ? 
HTML5 的 绘图 操作 方法 如 表 8-24 所 示 。 


表 8-24 HTMLS 的 绘图 操作 方法 














方法 名 称 方法 描述 
createImageData() 创建 新 的 、 空 白 的 ImageData 对 象 
getImageData() 返回 ImageData 对 象 ,该 对 象 为 画布 上 指定 的 矩形 复制 像素 数据 
putImageData() 把 图 像 数据 (从 指定 的 ImageData 对 象 ) 放 回 画布 上 


【问题 12】 HTMLS 绘图 的 其 他 方法 有 哪些 ? 
HTML5 绘图 的 其 他 方法 如 表 8-25 所 示 。 


表 8-25 HTMLS 绘图 的 其 他 方法 




















方法 名 称 方法 描述 
save() 保存 当前 环境 的 状态 
restore() 返回 之 前 保存 过 的 路 径 状 态 和 属性 
createEvent() 用 来 创建 或 打开 一 个 命名 的 或 无 名 的 事件 对 象 
getContext() 返回 一 个 用 于 在 画布 上 绘图 的 环境 
toDataURL() 将 HTML5 Canvas 的 内 容 保存 为 图 片 
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【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答 题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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将 JavaScript 程序 嵌入 HTML 代码 中 ,对 网 页 元 素 进行 控制 ,对 用 户 操作 进行 响应 ， 
从 而 实现 网 页 动态 交互 的 特殊 效果 ,这 种 特殊 效果 通常 称 为 网 页 特效 。 网 页 交互 是 指 浏 
览 者 单 击 栏目 、 超 级 链接 等 对 象 ,以 及 鼠标 光标 经 过 或 放 于 某 处 时 ,页 面 会 做 出 相应 的 反 
应 。 在 网 页 中 添加 一 些 恰当 的 特效 和 交互 ,使 页 面具 有 一 定 的 交互 性 ,动态 效果 ,能 吸引 
浏览 者 的 眼球 ,提高 页 面 的 观赏 性 ,趣味 性 。 


【知识 尾 备 】 


1. CSS 框 模型 


CSS 框 模型 (Box Model) 规 定 了 元 素 框 处 理 元 素 内 容 、 内 边 距 、 边 框 和 外 边 距 的 方 
式 。CSS 框 模型 组 成 结构 示意 图 如 图 9-1 所 示 ,该 图 中 element 表示 网 页 元 素 ,border 表 
示 边 框 ,padding 表示 内 边 距 ,也 将 其 翻译 为 填充 ;margin 表示 外 边 距 , 也 将 其 翻译 为 空白 
或 空白 边 。 本 书 中 我 们 把 padding 和 margin 统一 地 称 为 内 边 距 和 外 边 距 ,边框 内 的 空白 
是 内 边 距 ,边框 外 的 空白 是 外 边 距 。 





border( 边 框 ) 


margin( 外 边 距 ) 








padding( 内 边 距 ) 


element( 元 素 ) 


height( 高 度 ) 

















9-1 CSS 框 模型 组 成 结构 示意 图 
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元 素 框 的 最 内 部 分 是 实际 的 内 容 , 直 接 包 围 内 容 的 是 内 边 距 。 内 边 距 呈现 了 元 素 的 
背景 。 内 边 距 的 边缘 是 边框 。 边 框 以 外 是 外 边 距 ,外 边 距 默认 是 透明 的 ,因此 不 会 遮挡 其 
后 的 任何 元 素 。 背 景 应 用 于 由 内 容 和 内 边 距 ,边框 组 成 的 区 域 。 

内 边 距 ,边框 和 外 边 距 都 是 可 选 的 ,默认 值 是 零 。 但 是 ,许多 元 素 将 由 样式 表 设 置 外 
边 距 和 内 边 距 。 可 以 通过 将 元 素 的 margin 和 padding 设置 为 零 来 覆盖 这 些 浏览 器 样式 。 
可 以 分 别 进行 ,也 可 以 使 用 通用 选择 器 对 所 有 元 素 进行 设置 ,示例 代码 如 下 : 

和 得 

margin: 07 
padding: 07 

} 

在 CSS 中 ,width 和 height 指 的 是 内 容 区 域 的 宽度 和 高 度 。 增 加 内 边 距 、 边 框 和 外 
边 距 不 会 影响 内 容 区 域 的 尺寸 ,但 是 会 增加 元 素 框 的 总 尺寸 。 

假设 元 素 框 的 每 个 边 上 有 10 个 像素 的 外 边 距 和 5 个 像素 的 内 边 距 。 如 果 和 希望 这 个 
元 素 框 达到 100 个 像素 ,就 需要 将 内 容 的 宽度 设置 为 70 像素 ,如 图 9-2 所 示 。 





10px 5px 70px Spx 10px 
ee ee ea 
margin: 10px 
ey 1 
padding: 5px 


width: 70px 








蕊 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 坊 








100px 
9-2 元素 框 的 内 容 宽度 .内 边 距 和 外 边 距 尺 寸 示意 图 


#box { 
width: 70px; 
margin: 10px; 
padding: 5px7 
} 


内 边 距 .边框 和 外 边 距 可 以 应 用 于 一 个 元 素 的 所 有 边 , 也 可 以 应 用 于 单独 的 边 。 外 边 
距 可 以 是 负 值 ,而 且 在 很 多 情况 下 都 要 使 用 负 值 的 外 边 距 。 
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2. CSS 边框 属性 


在 HTML 中 ,使 用 CSS 边框 属性 可 以 创建 出 效果 出 色 的 边框 ,并 且 可 以 应 用 于 任何 
元 素 。 通 过 CSS3 ,可 以 创建 圆 角 边框 ,向 矩形 添加 阴影 ,使 用 图 片 来 绘制 边框 ,并 且 不 需 
使 用 Photoshop 之 类 的 设计 软件 。 在 CSS3 中 ,border-radius 属性 用 于 创建 圆 角 ,box- 
shadow 属性 用 于 向 方 框 添加 阴影 ,border-image 属性 可 以 使 用 图 片 来 创建 边框 。 元 素 的 
边框 (border) 是 围绕 元 素 内容 和 内 边 距 的 一 条 或 多 条 线 ,border 属性 允许 设置 元 素 边框 
的 样式 .宽度 和 颜色 。 

CSS 规范 指出 ,边框 绘制 在 “元 素 的 背景 之 上 ”。 这 很 重要 ,因为 有 些 边框 是 “间断 
的 ”( 例 如 ,点 线 边框 或 虚线 框 ) ,元 素 的 背景 应 当 出 现在 边框 的 可 见 部 分 之 间 。 

样式 是 边框 最 重要 的 一 个 方面 ,这 不 是 因为 样式 控制 着 边框 的 显示 ,而 是 因为 如 果 没 
有 样式 ,将 根本 没有 边框 。CSS 的 border-style 属性 定义 了 10 个 不 同 的 非 inherit 样式 ， 
包括 none。 例 如 ,可 以 为 把 一 幅 图 片 的 边框 定义 为 outset, 使 之 看 上 去 像 是 “ 凸 起 按钮 ”， 
代码 如 下 : 

a:link img {border- style: outset;} 

可 以 为 一 个 边框 定义 多 个 样式 ,示例 代码 如 下 : 

Pp.aside {border- style: solid dotted dashed double;} 

上 面 这 条 规则 为 类 名 为 aside 的 段落 定义 了 四 种 边框 样式 : 实 线 上 边框 \ 点 线 右边 
框 .虚线 下 边框 和 一 个 双 线 左边 框 。 我 们 又 看 到 了 这 里 的 值 采 用 了 top-right-bottom-left 
的 顺序 。 

如 果 和 希望 为 元 素 框 的 某 一 个 边 设 置 边框 样式 ,而 不 是 设置 所 有 4 个 边 的 边框 样式 ,可 
以 使 用 下 面 的 单 边 边框 样式 属性 : border-top-style、border-right-style、border-bottom- 


style, border-left-style。 


因此 ,以 下 两 种 方法 是 等 价 的 。 


p {border- style: solid solid solid none;} 

p {border- style: solid; border- left- style: none;} 

注意 : 如 果 要 使 用 第 二 种 方法 ,必须 把 单 边 属性 放 在 简写 属性 之 后 。 因 为 如 果 把 单 
边 属性 放 在 border-style 之 前 ,简写 属性 的 值 就 会 覆盖 单 边 值 none。 

可 以 通过 border-width 属性 为 边框 指定 宽度 。 为 边框 指定 宽度 有 两 种 方法 : 可 以 指 
定 长 度 值 ,例如 2px 或 0.1em; 或 者 使 用 3 个 关键 字 之 一 ,它们 分 别 是 thin ,medium( 默 认 
值 ) 和 thick。 

可 以 按照 top-right-bottom-left 的 顺序 设置 元 素 的 各 边 边框 ,代码 如 下 : 


Pp {border- style: solid; border- width: 15px Spx 15px Spx;} 
上 面 的 代码 也 可 以 简写 为 (这 种 写法 称 为 值 复制 ) ,代码 如 下 : 


Pp {border- style: solid; border- width: 15px Spx;} 
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也 可 以 通过 下 列 属性 分 别 设置 边框 各 边 的 宽度 : border-top-width、 border-right- 
width border-bottom-width border-left-width。 


因此 ,下 面 的 规则 定义 与 上 面 的 代码 是 等 价 的 。 





pl 
border- style: solid; 
border- top- width: 15px; 
border- right- width: Spx; 
border- bottom- width: 15px; 
border- left- width: Spx; 

} 


如 果 和 希望 显示 某 种 边框 ,就 必须 设置 边框 样式 ,例如 solid 或 outset。 那 么 如 果 把 
border-style 设置 为 none, 即 : 


p {border- style: none; border- width: 50px;} 


会 出 现 什么 情况 ? 

尽管 边框 的 宽度 是 50px, 但 是 边框 样式 设置 为 none。 在 这 种 情况 下 ,不仅 边框 的 样 
式 没有 了 ,其 宽度 也 会 变 成 0。 边框 消失 了 ,为 什么 呢 ? 这 是 因为 如 果 边 框 样式 为 none， 
即 边框 根本 不 存在 ,那么 边框 就 不 可 能 有 宽度 ,因此 边框 宽度 自动 设置 为 0, 而 不 论 原先 
定义 的 是 什么 。 由 于 border-style 的 默认 值 是 none, 如 果 没 有 声明 样式 ,就 相当 于 
“border-style: none”。 因 此 ,如 果 和 希望 边框 出 现 ,就 必须 声明 一 个 边框 样式 。 

设置 边框 颜色 非常 简单 ,CSS 使 用 一 个 简单 的 border-color 属性 , 它 一 次 可 以 接受 最 
多 4 个 颜色 值 。 可 以 使 用 任何 类 型 的 颜色 值 ,例如 可 以 是 命名 颜色 ,也 可 以 是 十 六 进 制 和 
RGB 值 ,示例 代码 如 下 : 


pl 

border- style: solid; 

border- color: blue rgb (25% , 35% , 45% ) # 909090 red; 
} 


如 果 颜 色 值 小 于 4 个 , 值 复制 就 会 起 作用 。 例 如 下 面 的 规则 定义 声明 了 段落 的 上 下 
边框 是 蓝 色 ,左右 边框 是 红色 。 


pi 
border- style: solid; 
border- color: blue red; 
} 


默认 的 边框 颜色 是 元 素 本 身 的 前 景色 。 如 果 没 有 为 边框 声明 颜色 , 它 将 与 元 素 的 文 

本 颜色 相同 。 另 外 ,如 果 元 素 没 有 任何 文本 ,假设 它 是 一 个 表格 ,其 中 只 包含 图 像 , 那 么 该 

表 的 边框 颜色 就 是 其 父 元 素 的 文本 颜色 (因为 color 可 以 继承 )。 这 个 父 元 素 很 可 能 是 
body、div 或 男 一 个 table。 

还 有 一 些 单 边 边 框 颜色 属性 ,它们 的 原理 与 单 边 样式 和 宽度 属性 相同 : border-top- 
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color border-right-color, border-bottom-color ,border-left-color。 


要 为 hl 元 素 指定 实 线 黑色 边框 ,而 右边 框 为 实 线 红色 ,代码 如 下 : 


hl { 
border- style: solid; 
border- color: black; 
border- right- color: red; 

如 果 边 框 没有 样式 ,就 没有 宽度 。 不 过 有 些 情 况 下 可 能 希望 创建 一 个 不 可 见 的 边框 。 
CSS2 引入 了 边框 颜色 值 transparent, 这 个 值 用 于 创建 有 宽度 的 不 可 见 边框 。 示 例 代码 
如 下 : 

<ahref="#">A< /a> 


<ahref="#">B</a> 
<ahref="#">C</a> 


我 们 为 上 面 的 链接 定义 了 如 下 样式 。 


a:link, a:visited { 
border- style: solid; 
border- width: 5px; 
border- color: transparent; 
} 
a:hover {border- color: gray;} 
从 某 种 意义 上 说 ,利用 transparent, 使 用 边框 就 像 是 额外 的 内 边 距 一 样 ;此 外 还 有 一 
个 好 处 ,就 是 能 在 需要 的 时 候 使 其 可 见 。 这 种 透明 边框 相当 于 内 边 距 , 因 为 元 素 的 背景 会 
延伸 到 边框 区 域 (如 果 有 可 见 背景 ) 。 


3. CSS 外 边 距 属性 


围绕 在 元 素 边框 的 空白 区 域 是 外 边 距 ,设置 外 边 距 会 在 元 素 外 创建 额外 的 “空白 ”。 
设置 外 边 距 的 最 简单 的 方法 就 是 使 用 margin 属性 ,这 个 属性 接收 任何 长 度 单位 (可 以 是 
像素 .英寸 .毫米 或 em、 百 分 数值 甚至 负 值 ) 。 

margin 可 以 设置 为 auto, 更 常见 的 做 法 是 为 外 边 距 设置 长 度 值 。 下 面 的 声明 在 hl 
元 素 的 各 个 边 上 设置 了 1/4 英寸 宽 的 空白 。 

hl {margin: 0.25in;} 

下 面 的 代码 为 hl 元 素 的 四 个 边 分 别 定 义 了 不 同 的 外 边 距 ,所 使 用 的 长 度 单位 是 像素 
(px) 。 

hl {margin: 10px Opx 15px Spx;} 


与 内 边 距 的 设置 相同 ,这 些 值 的 顺序 是 从 上 外 边 距 (top) 开 始 围 着 元 素 顺 时 针 旋 
转 的 。 
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margin: top right bottom left 

另外 ,还 可 以 为 margin 设置 一 个 百分比 数值 ,示例 代码 如 下 : 

p {margin: 10%;} 

百分数 是 相对 于 父 元 素 的 width 计算 的 ,上 面 这 段 代码 为 p 元 素 设置 的 外 边 距 是 其 
父 元 素 的 width 的 10%。 

margin 的 默认 值 是 0, 所 以 如 果 没 有 为 margin 声明 一 个 值 , 就 不 会 出 现 外 边 距 。 但 
是 ,在 实际 中 ,浏览 器 对 许多 元 素 已 经 提供 了 预定 的 样式 ,外 边 距 也 不 例外 。 例 如 ,在 支持 
CSS 的 浏览 器 中 ,外 边 距 会 在 每 个 段落 元 素 的 上 面 和 下 面 生 成 “ 空 行 "。 因 此 ,如 果 没 有 
为 p 元 素 声 明 外 边 距 ,浏览 器 可 能 会 自己 应 用 一 个 外 边 距 。 当 然 , 只 要 特别 做 了 声明 ,就 
会 覆盖 默认 样式 。 

有 时 ,我 们 会 输入 一 些 重复 的 值 。 


p {margin: 0.5em lem 0.5em lem;} 


通过 值 复制 ,可 以 不 必 重 复 地 输入 这 对 数字 。 上 面 的 规则 定义 与 下 面 的 规则 定义 是 
等 价 的 : 


p {margin: 0.5em lem;} 


这 两 个 值 可 以 取代 前 面 4 个 值 。 这 是 如 何 做 到 的 呢 ? CSS 定义 了 一 些 规则 ,允许 为 
外 边 距 指定 少 于 4 个 值 。 规 则 如 下 : 

如 果 缺 少 左 外 边 距 的 值 , 则 使 用 右 外 边 距 的 值 。 

如 果 缺 少 下 外 边 距 的 值 , 则 使 用 上 外 边 距 的 值 。 

如 果 缺 少 右 外 边 距 的 值 , 则 使 用 上 外 边 距 的 值 。 

图 9-3 提供 了 更 直观 的 方法 来 了 解 这 一 点 。 


top right bottom left 


9-3 值 复制 规则 示意 图 


换 句 话说 ,如 果 为 外 边 距 指定 了 3 个 值 , 则 第 4 个 值 ( 即 左 外 边 距 ) 会 从 第 2 个 值 ( 右 
外 边 距 ) 复 制 得 到 。 如 果 给 定 了 两 个 值 ,第 4 个 值 会 从 第 2 个 值 复制 得 到 ,第 3 个 值 ( 下 外 
边 距 ) 会 从 第 1 个 值 ( 上 外 边 距 ) 复 制 得 到 。 最 后 一 个 情况 ,如 果 只 给 定 一 个 值 ,那么 其 他 
3 个 外 边 距 都 由 这 个 值 (上 外 边 距 ) 复 制 得 到 。 

利用 这 个 简单 的 机 制 ,只 需 指定 必要 的 值 ,而 不 必 全 部 都 应 用 4 个 值 ,例如 以 下 
代码 。 


hl {margin: 0.25em lem 0.5em;} /* 等 价 于 0.25em、 lem、0.5em,lem*/ 
h2 {margin: 0.5em lem;} /* 等 价 于 0.5em, lem、0.5em、lem*/ 
p {margin: lpx;} /* 等 价 于 lpx、1lpx、1px、1lpx* / 
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假设 希望 把 p 元 素 的 上 外 边 距 和 左 外 边 距 设置 为 20 像素 ,下 外 边 距 和 右 外 边 距 设 置 
为 30 像素 。 在 这 种 情况 下 ,必须 写作 : 





p {margin: 20px 30px 30px 20px;} 


再 来 看 另外 一 个 实例 。 如 果 和 希望 除了 左 外 边 距 以 外 所 有 其 他 外 边 距 都 是 auto( 左 外 
边 距 是 20px) ,代码 如 下 : 


Pp {margin: auto auto auto 20px;} 


可 以 使 用 单 边 外 边 距 属性 为 元 素 单 边 上 的 外 边 距 设 置 值 , 如 果 和 希望 把 p 元 素 的 左 外 
边 距 设置 为 20px, 可 以 采用 以 下 方法 。 

P {margin- left: 20px;} 

可 以 使 用 下 列 任何 一 个 属性 来 只 设置 相应 上 的 外 边 距 ,而 不 会 直接 影响 所 有 其 他 外 
边 距 : margin-top、margin-right、margin-bottom、margin-left。 一 个 规则 中 可 以 使 用 多 个 
这 种 单 边 属性 ,示例 代码 如 下 : 

h2 { 

margin- top: 20px; 
margin- right: 30px; 
margin- bottom: 30px; 
margin- left: 20px; 

} 

当然 ,对 于 这 种 情况 ,使 用 margin 可 能 更 容易 一 些 。 

p {margin: 20px 30px 30px 20px;} 

不 论 使 用 单 边 属性 还 是 使 用 margin, 得 到 的 结果 都 一 样 。 一 般 来 说 ,如 果 和 希望 为 多 
个 边 设 置 外 边 距 , 使 用 margin 会 更 容易 一 些 。 不 过 ,从 文档 显示 的 角度 看 ,实际 上 使 用 哪 
种 方法 都 不 重要 ,所 以 应 该 选择 对 自己 来 说 更 容易 的 一 种 方法 。 


4. CSS 内 边 距 属性 


元 素 的 内 边 距 在 边框 与 元 素 内 容 之 间 的 空白 区 域 ,控制 该 区 域 最 简单 的 属性 是 
padding 属性 。padding 属性 定义 元 素 的 内 边 距 ,接受 长 度 值 或 百分比 值 ,但 不 允许 使 用 
负 值 。 例 如 ,如 果 设 计 所 有 hl 元 素 的 各 边 都 有 10 像素 的 内 边 距 , 只 需要 编写 以 下 代码 。 

hl {padding: 10px;} 

还 可 以 按照 上 、 右 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 , 各 边 均 可 以 使 用 不 同 的 单位 
或 百分比 值 , 代 码 如 下 : 

hl {padding: 10px 0.25em 2ex 20% ;} 

也 通过 使 用 下 面 四 个 单独 的 属性 ,分 别 设置 上 、 右 、 下 、 左 内 边 距 : padding-top、 


padding-right ,padding-bottom ,padding-left。 
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前 面 提 到 过 ,可 以 为 元 素 的 内 边 距 设置 百分数 值 。 百 分 数值 是 相对 于 其 父 元 素 的 
width 计算 的 ,这 一 点 与 外 边 距 一 样 。 所 以 ,如 果 父 元 素 的 width 改变 ,它们 也 会 改变 。 
下 面 这 条 规则 定义 把 段落 的 内 边 距 设置 为 父 元 素 width 的 10%。 





p {padding: 10%;} 

如 果 一 个 段落 的 父 元 素 是 div 元 素 ,那么 它 的 内 边 距 要 根据 div 的 width 计算 。 上 下 
内 边 距 与 左右 内 边 距 一 致 ; 即 上 下 内 边 距 的 百分数 会 相对 于 父 元 素 宽 度 设置 ,而 不 是 相对 
于 高 度 。 


5. CSS 多 列 属性 


通过 CSS3 ,可 以 创建 多 个 列 来 对 文本 进行 布局 ,就 像 报 纸 那样 。column-count 属性 
用 于 设置 元 素 应 该 被 分 隔 的 列 数 。 
把 div 元 素 中 的 文本 分 隔 为 三 列 的 示例 代码 如 下 ， 





div 

{ 
-moz- column- count :3; /* Firefox 浏 览 器 * / 
-webkit- column- count :3; /x* Safari 和 Chrome 浏 览 器 * / 
column- count:37 


} 


column-gap 属性 用 于 设置 列 之 间 的 间隔 ,规定 列 之 间 40 像素 的 间隔 的 示例 代码 
如 下 : 

div 

{ 
-moz- column- gap: 40px; /x Firefox 浏 览 器 x / 
—webkit- column- gap: 40px; /x* Safari 和 Chrome 浏览 器 x / 
column- gap:40px; 

} 


column-rule 属性 用 于 设置 列 之 间 的 宽度 .样式 和 颜色 规则 ,示例 代码 如 下 : 


div 

{ 
-moz- column- rule:3px outset # ££0000; /* Firefox 浏 览 器 * / 
一 webkit- column- rule:3px outset # ff00007 /* Safari 和 Chrome 浏 览 器 * / 
column- rule:3px outset # ff00007 

} 


6. CSS 动画 属性 


通过 CSS3 ,我 们 能 够 创建 动画 ,这 可 以 在 许多 网 页 中 取代 动画 图 片 .Flash 动画 以 及 
JavaScript。 动 画 是 使 元 素 从 一 种 样式 逐渐 变化 为 男 一 种 样式 的 效果 。 
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可 以 改变 任意 多 的 样式 任意 多 的 次 数 ,使 用 百分比 来 规定 变化 发 生 的 时 间 ,或 使 用 
关键 词 fom 和 to, 等 同 于 0( 动 画 的 开始 ) 和 100% (动画 的 完成 ) ,为 了 得 到 最 佳 的 浏览 器 
支持 ,应 该 始终 定义 0 和 100% 选 择 器 。 

@keyframes 规则 用 于 创建 动画 ,在 @keyframes 中 规定 某 项 CSS 样式 ,就 能 创建 由 
当前 样式 逐渐 改 为 新 样式 的 动画 效果 。 

当 动 画 为 25% 及 50% 时 改变 背景 色 , 当 动画 100% 完 成 时 再 次 改变 ,示例 代码 如 下 : 





@ keyframes myAnimation 
{ 
0% {background: red;} 
25$% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 


在 @keyframes 中 创建 动画 时 ,需要 把 它 捆绑 到 某 个 选择 器 ,否则 不 会 产生 动画 效 
果 。 至 少 通过 规定 动画 的 名 称 和 动画 的 时 长 两 项 CSS3 动画 属性 , 即 可 将 动画 绑 定 到 选 
择 器 。 

把 myAnimation 动画 拥 绑 到 div 元 素 , 时 长 为 5 秒 ,示例 代码 如 下 : 

div 

{ 


animation: myAnimation 5s; 


-moz- animation: myAnimation 5s; /x Firefox 浏 览 器 * / 
— Webkit- animation: myAnimation 5s; /x Safari 和 Chrome 浏览 器 * / 
-o-animation: myAnimation 5s; /* opera 浏 览 器 * / 


必须 定义 动画 的 名 称 和 时 长 。 如 果 忽 略 时 长 , 则 动画 不 会 允许 ,因为 默认 值 是 0。 


7. HTMLS 拖 放 的 实现 方法 


拖 放 (drag 和 drop) 是 一 种 常见 的 特性 , 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 在 
HTML5 中 , 拖 放 是 标准 的 一 部 分 ,任何 元 素 都 能 够 拖 放 。 
以 下 代码 是 一 个 简单 的 拖 放 实例 。 


< !doctype html> 
<html> 
<head> 
<script type= "text/javascript"> 
function allowDrop (ev) 
{ 
ev.preventDefault (); 
} 
function drag (ev) 
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{ 
ev.dataTransfer.setData ("Text",ev.target.id); 
} 
function drop (ev) 
{ 
ev.preventDefault (); 
Var data=ev.dataTransfer .getData ("Text"); 
ev.target .appendChild (document .getElementById (data)); 
} 
</script> 
< /head> 
<body> 
<div id="divl" ondrop= "drop (event)" 
ondragover= "allowDrop (event) "> 
</div> 
< img id= "dragl" src="logo.gif" draggable= "true" 
ondragstart= "drag (event)" width= "300" height= "200" /> 
< /body> 
</htm> 


1) 设置 元 素 为 可 拖 放 

首先 ,为 了 使 元 素 可 拖 动 ,把 draggable 属性 设置 为 true, 代 码 如 下 : 

< img draggable= "true" /> 

2) 拖 动 什么 

规定 当 元 素 被 拖 动 时 会 发 生 什么 。 

ondragstart 属性 调用 了 函数 drag(event), 它 规定 了 被 拖 动 的 数据 。dataTransfer. 
setData() 方 法 设置 被 拖 数 据 的 数据 类 型 和 值 ,数据 类 型 是 Text, 值 是 可 拖 动 元 素 的 
id("dragl") 。 

3) 放 到 何 处 

ondragover 事件 规定 在 何 处 放置 被 拖 动 的 数据 。 默 认 情 况 下 无 法 将 数据 /元 素 放 置 
到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 , 则 必须 阻止 对 元 素 的 默认 处 理 方式 。 这 里 通过 
调用 ondragover 事件 的 event. preventDefault() 方 法 进行 放置 。 

当 放 置 被 拖 数据 时 ,会 发 生 drop 事件 。ondrop 属性 调用 了 一 个 函数 drop(event)。 
调用 preventDefault() 来 避免 浏览 器 对 数据 的 默认 处 理 (drop 事件 的 默认 行为 是 以 链接 
形式 打开 ) ,通过 dataTransfer. getData("Text" ) 方 法 获得 被 拖 的 数据 。 该 方法 将 返回 在 
setData() 方 法 中 设置 为 相同 类 型 的 任何 数据 。 被 拖 数 据 是 被 拖 元 素 的 id("dragl") ,把 
被 拖 元 素 追 加 到 放置 元 素 (目标 元 素 ) 中 。 


8. JavaScript 主要 的 语法 规则 


(1) 网 页 中 插入 脚本 程序 的 方式 是 使 用 script 标记 符 , 把 脚本 标记 符 = script 二 
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二 /script 二 置 于 网 页 上 的 head 部 分 或 body 部 分 ,然后 在 其 中 加 入 脚本 程序 。 一 般 语法 
形式 如 下 : 


< script language= "JavaScript" type= "text/javascript"> 
在 此 编写 Javascript 代码 
//--> 

</script> 

通过 标识 二 script 盖 二 /script 盖 指明 其 间 是 JavaScript 脚本 源 代码 。 

使 用 script 标记 符 时 ,一 般 使 用 language 属性 说 明 使 用 何 种 语言 ,使 用 type 属性 标 
识 脚 本 程序 的 类 型 ,也 可 以 只 使 用 其 中 一 种 ,以 适应 不 同 的 浏览 器 。 如 果 需 要 ,还 可 以 在 
language 属性 中 标明 JavaScript 的 版 本 号 ,那么 ,所 使 用 的 JavaScript 脚本 程序 就 可 以 应 
用 该 版 本 中 的 功能 和 特性 ,例如 “language 王 JavaScript1. 2”。 

对 于 老式 的 浏览 器 可 能 会 在 过 script 二 标签 中 使 用 type 二 "text/javascript" ,现在 已 
经 不 必 这 样 做 了 ,JavaScript 是 所 有 现代 浏览 器 以 及 HTML5 中 的 默认 脚本 语言 。 

并 非 所 有 的 浏览 器 都 支持 JavaScript, 另 外 由 于 浏览 器 版 本 和 JavaScript 脚本 程序 之 
间 存 在 兼容 性 问题 ,可 能 会 导致 某 些 JavaScript 脚本 程序 在 某 些 版 本 浏览 器 中 无 法 正确 
执行 。 如 果 浏 览 不 能 识别 二 script 二 标签 ,就 会 将 二 script 二 与 二 /script 二 标签 符 之 间 的 
JavaScript 脚本 程序 当 作 普通 的 HTML 字符 显示 在 浏览 器 中 。 针 对 此 类 问题 ,可 以 将 
JavaScript 脚本 程序 代码 置 于 HTML 注释 符 之 间 , 这 样 对 于 不 支持 JavaScript 的 浏览 器 
就 不 会 把 代码 内 容 当 作文 本 显示 在 页 面 上 ,而 是 把 它们 当 作 注释 ,不 会 做 任何 操作 。 

“二 ! 一 "是 HTML 注释 符 的 起 始 标签 “-- >" 是 HTML 注释 符 的 结束 标签 。 对 于 不 
支持 JavaScript 脚本 程序 的 浏览 器 ,标签 "一 !- 和”*//--> ”之 间 的 内 容 当 作 注 释 内 容 , 对 
于 支持 JavaScript 程序 的 浏览 器 ,这 对 标签 将 不 起 任何 作用 。 另 外 需要 注意 的 是 ,HTML 
注释 标记 符 的 结束 符 标 记 之 前 有 两 斜 杠 “//”, 这 两 个 斜 杠 是 JavaScript 语言 中 的 注释 符 
号 ,如 果 没 有 这 两 个 斜 杠 , JavaScript 解释 器 试图 将 HTML 注释 的 结束 标记 符 作 为 
JavaScript 来 解释 ,从 而 有 可 能 导致 出 错 。 

(2) 所 有 的 JavaScript 语句 以 分 号 "; ”结束 。 

(3) JavaScript 语言 是 大 小 写 敏 感 的 。 

JavaScript 的 注释 用 于 对 JavaScript 代码 进行 解释 ,以 提高 程序 的 可 读 性 。 调 试 
JavaScript 程序 时 ,还 可 以 使 用 注释 阻止 代码 块 的 执行 。 

(4) JavaScript 有 两 种 类 型 的 注释 。 

@ 单行 注释 以 双 斜 杠 开 头 (//) 。 例 如 : 





// this is a single- line comment 
@ 多 行 注释 以 单 斜 杠 和 星 号 开头 (/ * ) ,以 星 号 和 单 斜 杠 结尾 ( x /)。 例 如 : 
/* this is amulti— 
line comment * / 
注释 可 以 单独 放 一 行 ,也 可 以 在 行 末 。 
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9. 在 HTML 文档 中 伐 入 JavaScript 代码 的 方法 


HTML 中 的 JavaScript 脚本 必须 位 于 过 script 二 与 二 /script 二 标签 之 间 , 脚 本 可 被 
放置 在 HTML 页 面 的 二 body 二 或 二 head 放 部 分 中 ,或 者 同时 存在 于 两 个 部 分 中 。 通 常 
的 做 法 是 把 函数 放 入 过 head> 部 分 中 ,或 者 放 在 页 面 底 部 。 这 样 就 可 以 把 它们 安置 到 同 
一 处 位 置 ,不 会 干扰 页 面 的 内 容 。 

JavaScript 代码 嵌入 HTML 文档 的 形式 有 以 下 几 种 。 

(1) 在 head 部 分 添加 JavaScript 脚本 。 将 JavaScript 脚本 置 于 head 部 分 ,使 之 在 其 
余 代 码 之 前 装载 ,快速 实现 其 功能 ,并 且 容 易 维护 。 有 时 在 head 部 分 定义 JavaScript 脚 
本 ,在 body 部 分 调用 JavaScript 脚本 。 

(2) 直接 在 body 部 分 添加 JavaScript 脚本 。 由 于 某 些 脚本 程序 在 网 页 中 特定 部 分 
显示 其 效果 ,此 时 脚本 代码 就 会 位 于 body 中 的 特定 位 置 。 也 可 以 直接 在 HTML 表单 的 
<<input 之 标签 符 内 添加 脚本 ,以 响应 输入 元 素 的 事件 。 

(3) 链接 JavaScript 脚本 文件 。 引 用 外 部 脚本 文件 ,应 使 用 script 标签 符 的 src 属性 
来 指定 外 部 脚本 文件 的 URL。 这 种 方式 可 以 使 脚本 得 到 复 用 ,从 而 降低 了 维护 的 工 
作 量 。 

外 部 JavaScript 文件 是 最 常见 的 包含 JavaScript 代码 的 方式 ,其 主要 原因 如 下 : 

(1) 如 果 HTML 页 面 中 有 着 更 少 的 代码 ,搜索 引擎 就 能 够 以 更 快 的 速度 来 抓 取 和 索 
引 网 站 。 

(2) 保持 JavaScript 代码 和 HTML 的 分 离 , 这 样 代 码 显得 更 清晰 , 且 最 终 更 易于 
管理 。 

(3) 因为 可 以 在 HTML 代码 中 包含 进 多 个 JavaScript 文件 ,因此 可 以 把 JavaScript 
文件 分 开放 在 Web 服务 器 上 不 同 的 文件 目录 结构 中 ,这 类 似 于 图 像 的 存放 方式 ,这 是 
一 种 更 容易 管理 代码 的 做 法 。 清 晰 、 有 条 理 的 代码 始终 是 让 网 站 管理 变 得 容易 的 关键 。 


10. jQuery 简介 


jQuery 是 一 个 JavaScript 函数 库 ,是 一 个 “ 写 得 更 少 ,但 做 得 更 多 ”的 轻 量 级 
JavaScript 库 ,jQuery 极 大 地 简化 了 JavaScript 编程 。 

1) jQuery 的 引用 方法 

如 需 使 用 jQuery, 需要 先 下 载 jQuery 库 , 然 后 使 用 HTML 的 二 script 二 标签 引 
用 它 。 

< script type= "text/javascript" src= "jquery.js"></script> 


在 HTML5 中 ,到 script 二 标签 中 的 type 二 "text/javascript" 可 以 省 上 略 不 写 ,因为 
JavaScript 是 HTML5 以 及 所 有 现代 浏览 器 中 的 默认 脚本 语言 。 
2) jQuery 的 基础 语法 
通过 jQuery, 可 以 选取 (查询 ,query)HTML 元 素 , 并 对 它们 执行 “操作 ”(actions) 。 
jQuery 语法 是 为 HTML 元 素 的 选取 编制 的 ,可 以 对 元 素 执行 某 些 操作 。 其 基础 语 
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$ (selector) .action () 


(1) 美元 符号 $ 定义 jQuery,jQuery 库 只 建立 一 个 名 为 jQuery 的 对 象 ,其 所 有 函数 
都 在 该 对 象 之 下 ,其 别名 为 $ 。 

(2) 选择 符 (selector) 用 于 “查询 ”或 “查找 "HTML 元 素 。 

(3) jQuery 的 action() 用 于 执行 对 元 素 的 操作 。 例 如 :“$ (this). hide() ”隐藏 当前 
元 素 。 
3) 文档 就 绪 函 数 ready 
jQuery 使 用 $ (document). ready() 方 法 代替 传统 JavaScript 的 window. onload 事 
件 ,通过 使 用 该 方法 ,可 以 在 DOM 载 人 就 绪 时 就 对 其 进行 操纵 并 调用 执行 它 所 绑 定 的 
函数 。 

$ (document). ready() 方 法 和 window. onload 事件 有 相似 的 功能 ,但 是 执行 时 机 有 
细微 区 别 。window. onload 方法 是 在 网 页 中 所 有 的 元 素 ( 包 括 元 素 的 所 有 关联 文件 ) 完 全 
加 载 到 浏览 器 后 才 执行 , 即 JavaScript 此 时 才 可 以 访问 网 页 中 的 任何 元 素 。 而 通过 
jQuery 中 的 $ (document). ready() 方 法 注册 的 事件 处 理 程序 ,在 DOM 完全 就 绪 时 就 可 
以 被 调用 。 此 时 ,网 页 的 所 有 元 素 对 jQuery 而 言 都 是 可 以 访问 的 ,但 是 ,这 并 不 意味 着 这 
些 元 素 关联 的 文件 都 已 经 下 载 完毕 。 

jQuery 函数 应 位 于 ready 方法 中 ,例如 : 


$ (document) .ready (function(){ 
// 函 数 代 码 
D; 
这 是 为 了 防止 文档 在 完全 加 载 (就 绪 ) 之 前 运行 jQuery 代码 。 
如 果 在 文档 没有 完全 加 载 之 前 就 运行 函数 ,操作 可 能 失败 ,例如 ,试图 隐藏 一 个 不 存 
在 的 元 素 或 者 获得 未 完全 加 载 的 图 像 的 大 小 。 
以 上 代码 简写 为 以 下 形式 。 
$ (function(){ 
// 函 数 代码 
Ds; 
另外 ,由 于 $ (document) 也 可 以 简写 为 $()。 当 $() 不 带 参数 时 ,默认 参数 就 是 
document ,因此 也 可 以 简写 为 以 下 形式 。 


$() .ready (function(){ 
// 函 数 代 码 
Ds; 


以 上 三 种 形式 的 功能 相同 ,可 以 根据 喜好 进行 选择 。 
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【引导 训练 】 
任务 9-1 网 页 中 显示 当前 日 期 


【任务 描述 】 


在 网 页 0901. html 中 圆 角 矩形 区 域 左 侧 显示 当前 的 日 期 及 星期 数 ,日 期 格式 及 顺序 
如 图 9-4 所 示 。 


偷 2017 年 10 月 6 日 星期 五 


图 9-4 网 页 中 显示 当前 日 期 及 星期 数 的 格式 


【任务 吝 施 】 


1. 创建 所 需 的 文件 夹 


在 文件 夹 “HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit09, 然 后 在 该 文件 夹 
中 创建 子 文件 夹 0901, 再 在 该 子 文件 夹 0901 中 创建 css、images 子 文件 夹 。 


2. 启动 Dreamweaver CC 

使 用 Windows 的 [开始 了 沫 单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 

3. 创建 本 地 站 点 和 网 页 

创建 一 个 名 称 为 “单元 9” 的 本 地 站 点 ,站 点 文件 夹 为 Unit09。 在 该 站 点 的 文件 夹 
0901 中 创建 网 页 0901. html。 

4. 定义 网 页 的 CSS 代码 

在 文件 夹 CSS 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 9-1 
所 示 。 

表 9-1 网 页 0901. html 中 样式 文件 main. css 的 CSS 代码 定义 

















i CSS 代码 序号 CSS 代码 
01 el 07 width: 400px; 
02 float: left; 08 text- align: left; 
03 border:2px solid #c3d9ff7 09 |} 
04 border- radius: 8px; 10 
05 background- color: #c3d9ff; 11 
06 padding: 5px; 12 |#ral{ 
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续 表 
序号 CSS 代码 序号 CSS 代码 
13 padding- right: 10px; 18 |#rd2{ 
14 margin- top: 3px; 19 margin- top: 3px; 
焉 float: left; 20 float: left; 
16 line- height: 18px; 21 line- height: 18px; 





5. 编写 网 页 0901. html 的 HTML 代码 


切换 到 网 页 文档 0901. html 的 [代码 视图 ,在 标签 “二 /head 二 ”的 前 面 输入 链接 外 部 
样式 表 的 代码 如 下 : 


<link href="css/main.css" rel= "stylesheet" type= "text/css"> 
然后 输入 表 9-2 所 示 的 HTML 代码 。 


表 9-2 网 页 0901. html 的 HTML 代码 





序号 HTML 代码 
01 <div class= "cc"> 
02 <div id="rdl"> gnbsp;< img src="images/top.gif" width="18"” height="15" border=" 
03 0" alt="imgl"/> 
04 </div> 
05 <div idq="rd2"> 
06 
07 </div> 
08 </div> 





6. 编写 显示 当前 日 期 的 JavaScript 代码 


切换 到 【代码 3 视图 ,将 光标 置 于 代码 “一 div id= "rd2" 二 ”与 “一 /div 之 ”之 间 ,然后 输 
入 表 9-3 所 示 的 JavaScript 代码 。 


表 9-3 显示 当前 日 期 的 JavaScript 代码 之 一 








行 号 JavaScript 代码 
01 <script language= "JavaScript" type= "text/javascript"> 
02 i 
03 Var tempDate, year, month, day; 
04 tempDate =new Date (); 
05 Year= tempDate .getFullYear (); 
06 month= tempDate.getMonth() +17 
07 day =tempDate.getDate () 7 
08 document .Write (year+ "年 叶 month+ "月 "+ day+ "日 gnbsp; gnbsp;"); 
09 Var weekArray= new Array (6); 
10 weekArray[0]=" 星 期 日 "; 





228 


单元 9 网 页 中 特效 与 交互 的 应 用 设计 








续 表 

行 号 JavaScript 代码 

11 weekArray[1]= "星期 一 "; 

12 weekArray[2]= "星期二"; 

13 weekArray[3]=" 星 期 三 "; 

14 weekArray[4]=" 星 期 四 "; 

15 weekArray[5]= "星期 五 "; 

16 weekArray[6]= "星期六"; 

7 weekday= tempDate .getDay (); 

18 document .write (weekArray [weekday]); 

19 [te 

20 </script> 





7. 保存 与 浏览 网 页 
保存 网 页 0901. html, 其 浏览 效果 如 图 9-4 所 示 。 
8. 分 析 显 示 当 前 日 期 的 JavaScript 代码 


表 9-3 中 JavaScript 代码 的 功能 是 在 网 页 中 显示 当前 日 期 (包括 年 月 .日 和 星期 )， 
该 代码 中 应 用 了 以 下 JavaScript 知识 。 

(1) JavaScript 代码 嵌入 HTML 代码 中 的 标签 符 志 script 人 与 一 /script 一 。 

(2) 对 于 某 些 浏览 器 ,不 支持 JavaScript 代码 添加 注释 符 。 

(3) JavaScript 区 分 字母 的 大 小 写 , 具 有 大 小 写 敏 感 的 特点 。 

(4) JavaScript 的 变量 声明 语句 、 赋 值 语 句 和 输出 语句 。 

(5) JavaScript 中 变量 的 定义 与 赋值 ,数组 对 象 的 定义 、 数 组 元 素 的 赋值 和 数组 元 素 
的 访问 。 

(6) JavaScript 的 对 象 : Date、Array、document。 

(7) Date 对 象 的 方法 : getFullYear() .getMonth() .getDate() 和 getDay()。 

(8) document 对 象 的 方法 : write() 。 

(9) JavaScript 的 表达 式 :“tempDate. getMonth() 十 1”“year 十 "年 "十 month 十 
"day 

表 9-3 中 JavaScript 代码 的 具体 含义 解释 如 下 : 

(1) JavaScript 脚本 程序 必须 置 于 二 script 过 与 二 /script 全 标签 符 中 。 

第 01 行 和 第 20 行使 用 二 script 所 /script 二 标签 符 指 明 其 间 的 程序 代码 是 
JavaScript 脚本 程序 。 王 script 过 标签 中 的 “language= "JavaScript"" 标 识 脚本 程序 语言 
的 类 型 ,用 于 区 别 其 他 的 脚本 程序 语言 。 这 里 使 用 的 脚本 语言 是 JavaScript, 所 以 
language 的 属性 值 为 JavaScript。 如 果 使 用 的 脚本 语言 为 VBScript, 则 language 的 属性 
值 为 VBScript。 

同样 ,一 script 盖 标签 中 的 “type 王 "textVyjavascript"” 也 是 用 于 标识 脚本 程序 的 类 型 ， 
用 于 区 别 其 他 的 程序 类 型 ,例如 “text/css”。 
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language 属性 和 type 属性 可 以 只 使 用 其 中 一 种 ,以 适应 不 同 的 浏览 器 。 

如 果 需 要 ,还 可 以 在 language 属性 中 标明 JavaScript 的 版 本 号 ,那么 ,所 使 用 的 
JavaScript 脚本 程序 就 可 以 应 用 该 版 本 中 的 功能 和 特性 ,例如 “language 二 JavaScript1. 2”。 

(2) 第 02 行 的 符号 “一 !- ”和 第 19 行 的 符号 “// 一 > ”针对 不 支持 脚本 的 浏览 器 忽略 
其 间 的 脚本 程序 。 

并 非 所 有 的 浏览 器 都 支持 JavaScript, 另 外 由 于 浏览 器 版 本 和 JavaScript 脚本 程序 之 
间 存 在 兼容 性 问题 ,可 能 会 导致 某 些 JavaScript 脚本 程序 在 某 些 版 本 浏览 器 中 无 法 正确 
执行 。 如 果 浏 览 不 能 识别 过 script 之 标签 ,就 会 将 去 script 之 与 二 /script 二 标签 符 之 间 的 
JavaScript 脚本 程序 当 作 普通 的 HTML 字符 显示 在 浏览 器 中 。 针 对 此 类 问题 ,可 以 将 
JavaScript 脚本 程序 代码 置 于 HTML 注释 符 之 间 , 这 样 对 于 不 支持 JavaScript 的 浏览 器 
就 不 会 把 代码 内 容 当 作文 本 显示 在 页 面 上 ,而 是 把 它们 当 作 注释 ,不 会 做 任何 操作 。 

“二 1--” 是 HTML 注释 符 的 起 始 标签 -二 ”是 HTML 注释 符 的 结束 标签 。 对 于 不 
支持 JavaScript 脚本 程序 的 浏览 器 ,标签 二 !-- 和 // 一 > 之 间 的 内 容 当 作 注 释 内 容 ; 对 于 支 
持 JavaScript 程序 的 浏览 器 ,这 对 标签 将 不 起 任何 作用 。 另 外 ,需要 注意 的 是 ,第 19 行 是 
以 JavaScript 单行 注释 “//” 开 始 的 , 它 告诉 JavaScript 编译 器 忽略 HTML 注释 的 内 容 。 

(3) 第 03 一 18 行 共有 16 条 语句 ,每 一 条 语句 都 以 “; ”结束 。 

(4) JavaScript 区 分 字母 的 大 小 写 。 

在 同一 个 程序 中 使 用 大 写字 母 或 使 用 小 写字 母 表示 不 同 的 意义 ,不 能 随意 将 大 写字 母 
写成 小 写 ,也 不 能 随意 将 小 写字 母 写 成 大 写 。 例 如 第 03 行 中 声明 的 变量 tempDate, 该 变量 
名 的 第 5 个 字母 为 大 写 D, 在 程序 中 使 用 该 变量 时 该 写 母 必须 统一 写成 大 写 D, 而 不 能 写成 
小 写 d。 如 果 声 明 变 量 时 ,变量 名 称 为 tempdate 的 形式 ,全 为 小 写字 母 , 在 程序 中 使 用 该 变 
量 时 ,也 不 能 写成 大 写 。 也 就 是 说 使 用 变量 时 的 名 称 应 与 声明 变量 的 名 称 完 全 一 致 。 

JavaScript 的 日 期 对 象 Date 的 首 字 母 必须 是 大 写字 母 D, 不 能 写成 小 写字 母 ,否则 不 
能 识别 该 日 期 对 象 ,同样 日 期 对 象 的 方法 getFullYear()、getMonth()、getDate() 和 
getDay() 中 的 大 写字 母 都 不 能 写成 小 写 , 否 则 不 能 识别 该 方法 的 名 称 。JavaScript 的 数 
组 对 象 Array 的 首 字母 是 大 写字 母 A, 也 不 能 写成 小 写 a。 

JavaScript 的 文档 对 象 document 则 全 部 为 小 写字 母 ,而 不 能 写成 Document, 否 则 由 
于 不 能 识别 Document, 而 会 出 现 错误 。 

(5) 第 03 行为 声明 变量 的 语句 : 声明 4 个 变量 ,变量 名 分 别 为 tempDate、 year、 
month 和 day。 

(6) 第 04 行 创建 一 个 日 期 对 象 实例 ,其 内 容 为 当前 日 期 和 时 间 , 且 将 日 期 对 象 实例 
赋 给 变量 tempDate。 

(7) 第 05 行使 用 日 期 对 象 的 getFullYear() 方 法 获取 日 期 对 象 的 当前 年 份 数 , 且 赋 
给 变量 year。 

(8) 第 06 行使 用 日 期 对 象 的 getrMonth() 方 法 获取 日 期 对 象 的 当前 月 份 数 , 且 赋 给 
变量 month。 注 意 由 于 月 份 的 返回 值 是 从 0 开始 的 索引 序号 , 即 1 月 返回 0, 其 他 月 份 依 
次 类 推 ,为 了 正确 表述 月 份 ,需要 做 加 1 处 理 ,让 1 月 显示 为 “1 月 ”而 不 是 “0 月 ”。 

(9) 第 07 行使 用 日 期 对 象 的 getDate( ) 方 法 获取 日 期 对 象 的 当前 日 期 数 ( 即 1 一 31)， 
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且 赋 给 变量 day。 

(10) 第 08 行使 用 文档 对 象 document 的 write() 方 法 向 网 页 中 输出 当前 日 期 ,表达 
式 “year 十 "年 "十 month 十 "月 "十 day 十 "日 "” 使 用 运算 符 “ 十 ”连接 字符 串 , 其 中 year、 
month .day 是 变量 ,年 "月 " "日 "是 字符 串 。 

(11) 第 09 行使 用 关键 字 new 和 构造 函数 Array() 创 建 一 个 数组 对 象 weekArray， 
并 且 创 建 数组 对 象 时 指定 了 数组 的 长 度 为 7, 即 该 数组 元 素 的 个 数 为 7, 数 组 元 素 的 下 标 
(序列 号 ) 从 0 开始 ,各 个 数组 元 素 的 下 标 为 0 一 6。 此 时 数组 对 象 的 每 一 个 元 素 都 尚未 指 
定 类 型 。 

(12) 第 10 一 16 行 分 别 给 数组 对 象 weekArray 的 各 个 元 素 赋值 。 

(13) 第 17 行使 用 日 期 对 象 的 getDay() 方 法 获取 日 期 对 象 的 当前 星期 数 , 其 返回 值 
为 0 一 6 ,序号 0 对 应 星期 日 ,序号 1 对 应 星期 一 ,依次 类 推 , 序 号 6 对 应 星期 六 。 

(14) 第 18 行使 用 “[ ] ?运算 符 访问 数组 元 素 , 即 获取 当前 星期 数 的 中 文 表示 ,然后 使 
用 文档 对 象 document 的 write() 方 法 向 网 页 中 输出 。 


9. 分 析 具 有 类 似 功 能 的 JavaScript 代码 的 作用 与 含义 


表 9-4 也 是 输出 当前 日 期 的 JavaScript 代码 ,在 网 页 0901. html 用 表 9-4 所 示 的 
JavaScript 代码 替换 表 9-3 所 示 的 代码 ,然后 浏览 该 网 页 ,观察 显示 的 当前 日 期 。 


表 9-4 显示 当前 日 期 的 JavaScript 代码 之 二 








行 号 JavaScript 代码 
01 <script language= "UavaScript1.2" type= "text/javascript"> 
02 = 
03 Var today, year, day; 
04 today =new Date () 7 
05 year= today.getFullYear () 7 
06 day= today.getDate () 7 
07 var isMonth =new Array ("1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 "， 
08 a A, oe ,lt ee Uh ef bes yD he 
09 var isDay =new Array ("星期 日 ", "星期 一 ", "星期二"， 
10 "星期 三 "," 星 期 四 ", "星期 五 ", "星期 六 "); 
11 document .write (year + 咋 叶 isMonth [today.getMonth ()]+ day+ "日 " 
过 +isDay [today.getDay ()]); 
13 == 
14 </script> 


任务 9-2 网 页 中 不 同时 间 段 显示 不 同 的 问候 语 


【任务 描述 】 


应 用 JavaScript 的 if... else if 语句 ,在 网 页 0902. html 中 根据 不 同时 间 段 (采用 
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24 小 时 制 ) 显 示 相 应 的 问候 语 ,具体 要 求 如 下 : 


(1) 每 天 上 午 8 点 之 前 (不 包含 8 点) 显示 “早晨 好 !”。 
(2) 每 天 上 午 12 点 之 前 (包含 8 点 但 不 包含 12 点) 显示“ 上午 好 !”。 


(3) 每 天 的 12 点 至 14 点 (包含 12 点 但 不 包含 14 点 ) 显 示 “ 中 午 好 !”。 
(4) 每 天 的 14 点 至 17 点 (包含 14 点 但 不 包含 17 点) 显示 “下 午 好 !”。 
(5) 每 天 的 17 点 之 后 (包含 17 点 ) 显 示 “ 晚 上 好 !”。 


【任务 吝 施 】 


1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0902, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 
然后 在 子 文件 夹 0902 中 创建 网 页 0902. html。 


2. 定义 网 页 的 CSS 代码 


在 文件 夹 css 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,如 表 9-5 
所 示 。 


表 9-5 网 页 0902. html 中 样式 文件 main. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
a licet 起 margin- top: 3px; 
02 float: left; 13 float: left; 
03 border:2px solid #c3d9ff; 14 line- height: 18px; 
04 border- radius: 8px; 5. | 十 
05 background- color: #c3d9ff; 16 |#rd21{ 
06 padding: 5px; 17 margin- top: 3px; 
07 width: 400px; 18 padding- right:10px; 
08 text-align: left; 19 float: right; 
09 |} 20 line- height: 18px; 
10 |#rdl{ 21 |} 
11 padding- right: 10px; 














3. 编写 网 页 0902. html 的 HTML 代码 


切换 到 网 页 文档 0902. html 的 [代码 了 视图 ,在 标签 “过 /head>” 的 前 面 输入 链接 外 部 
样式 表 的 代码 如 下 : 


<link href= "css/main.css" rel= "stylesheet" type= "text/css"> 


然后 输入 表 9-6 所 示 的 HTML 代码 。 
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表 9-6 网 页 0902. html 的 HTML 代码 





序号 HTML 代码 
01 <div class= "cc"> 
02 <div id= "rdl"> gnbsp;< img src= "images/top.gif" width="18" height="15" border=" 
03 0" alt="imgl" /> 
04 </div> 
05 <div id=- "rd2"> 
06 
07 </div> 
08 </div> 





4. 编写 不 同时 间 段 显示 不 同 问候 语 的 JavaScript 代码 


切换 到 [代码 ] 视 图 ,将 光标 置 于 代码 “二 div id= "rd2 "过 "与 “二 /div 二 ”之 间 , 然 后 输 
入 表 9-7 所 示 的 JavaScript 代码 。 


表 9-7 在 不 同时 间 段 显示 不 同 问候 语 的 JavaSeript 代码 





行 号 JavaScript 代码 
01 < script language= "UavaScript" type= "text/javascript"> 
02 和 
03 Var today, hour; 
04 today =new Date () 7 
05 hour =today .getHours (); 
06 if (hour <8){ document .write ("gnbsp; 早 晨 好 !");} 
07 else if (hour <12) {document .write ("gnbsp; 上 午 好 1");} 
08 else if (hour <14) { document .write ("gnbsp; 中 午 好 !");} 
09 else if (hour <17) { document .write ("gnbsp; 下 午 好 !");} 
10 else { document .write ("gnbsp; 晚 上 好 !");} 
11 ==3 
5 </script> 





5. 保存 与 浏览 网 页 
保存 网 页 0902. html, 其 浏览 效果 如 图 9-5 所 示 。 


合 上 午 好 ! 
9-5 “上 午 ” 时 间 段 网 页 0902. html 的 浏览 效果 


6. 分 析 显 示 不 同 问 候 语 的 JavaScript 代码 


标签 符 过 script 二 与 二 /script> 注释 符 “ 志 ! 一 和 ”*// 一 > ”的 作用 和 含义 在 任务 9-1 
中 已 有 详细 说 明 ,以 后 各 任务 中 不 再 重复 说 明 ,请 参考 任务 9-1 的 内 容 。 

表 9-7 中 JavaScript 代码 应 用 了 以 下 的 JavaScript 知识 。 

(1) JavaScript 的 变量 声明 语句 、 赋 值 语 句 和 if. . . else if 语句 。 
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(2) 关系 运算 符 和 关系 表达 式 。 

(3) JavaScript 的 对 象 : Date、document。 

(4) Date 对 象 的 方法 : getHours() 。 

(5) document 对 象 的 方法 : write() 。 

表 9-7 中 JavaScript 代码 的 具体 含义 解释 如 下 。 

(1) 第 03 行 声 明了 两 个 变量 ,变量 名 分 别 为 today、hour。 

(2) 第 04 行 是 一 条 赋值 语句 ,创建 一 个 日 期 对 象 , 且 赋 给 变量 today。 

(3) 第 05 行 是 一 条 赋值 语句 ,调用 日 期 对 象 的 方法 getHours() 获 取 当 前 日 期 对 象 的 
小 时 数 , 且 赋 给 变量 hour。 

(4) 第 06 一 10 行 是 一 个 较为 复杂 的 if... else if 语句 ,该 语句 的 执行 规则 如 下 : 

首先 判断 条 件 表达 式 hour 二 8 是 否 成 立 , 如 果 该 条 件 表达 式 的 值 为 true( 例 如 早晨 
7 点 ), 则 程序 将 执行 对 应 语句 “document. write("&nbsp; 早 晨 好 !1");”, 即 在 网 页 中 显示 
“早晨 好 !1” 的 问候 语 。 

如 果 条 件 表达 式 hour 二 8 的 值 为 false( 例 如 上 午 9 点 ) ,那么 判断 第 1 个 else 让 后 面 
的 条 件 表达 式 hour 二 12 是 否 成 立 ,如 果 该 条 件 表达 式 的 值 为 true( 例 如 上 午 9 点 ), 则 程 
序 将 执行 对 应 语句 “document. write(" &nbsp; 上 午 好 1");”, 即 在 网 页 中 显示 “上 午 好 !” 
的 问候 语 。 

依 此 类 推 ,直到 完成 最 后 一 个 else if 条 件 表达 式 hour 二 17 的 测试 ,如 果 所 有 的 让 和 
else if 的 条 件 表达 式 都 不 成 立 ( 例 如 晚上 8 点 ), 则 执行 else 后 面 的 语句 “document. write 
("&nbsp; 晚 上 好 1");”, 即 在 网 页 中 显示 “晚上 好 1” 的 问候 语 。 





任务 9-3 网 页 中 制作 圆 角 按钮 和 圆 角 图 片 


【任务 描述 】 
(1) 创建 网 页 090301. html, 该 网 页 中 制作 的 圆 角 渐变 效果 按钮 的 浏览 效果 如 图 9-6 所 示 。 
图 9-6 网 页 090301. html 中 圆 角 渐变 效果 网 页 按钮 的 浏览 效果 


(2) 创建 网 页 090302. html, 该 网 页 中 制作 的 圆 角 图 片 和 图 形 图 片 的 浏览 效果 如 图 9-7 
所 示 。 


【任务 忌 施 】 
1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0903, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 
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图 9-7 网 页 090302. html 中 圆 角 图 片 和 图 形 图 片 的 浏览 效果 


然后 在 子 文件 夹 0903 中 创建 网 页 090301. html 和 090302. html。 


2. 定义 网 页 090301. html 的 CSS 代码 


网 页 090301. html 对 应 的 CSS 代码 如 表 9-8 所 示 。 


表 9-8 网 页 090301. html 对 应 的 CSS 代码 





序号 CSS 代码 
01 af 
02 Color: #339; 
03 text- decoration: none; 
04 } 
05 
06 a:hover { 
07 text- decoration: underline; 
08 } 
09 
10 .button { 
11 display: inline-block; 
12 zoom: 1; 
3 Vertical-align: baseline; 
14 margin: 0 2px; 
15 outline: none; 
16 cursor: pointer; 
好 text- align: center; 
18 text- decoration: none; 
19 font: 14px/100% Arial, Helvetica, sans- serif; 
20 padding: .5em 1.5em .55em; 
21 text- shadow: 0 lpx lpx rgba(0,0,0, .3); 
22 —webkit- border- radius: .5em; 
23 -moz-border- radius: .5em; 
24 border- radius: .Sem; 
25 一 Webkit-box- shadow: 0 1px 2px rgba (0,0,0, .2); 
26 —moz- box— shadow: 0 lpx 2px rgba (0,0,0, .2); 
27 box- shadow: 0 lpx 2px rgba (0,0,0, .2); 
28 } 
29 
30 -button:hover { 
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续 表 

序号 CSS 代码 

31 text— decoration: none; 

32 3 

33 

34 .button:active { 

5 position: relative; 

36 top: lpx; 

3 3 

38 

39 .green { 

40 Color: #e8f0de; 

41 border: solid lpx # 5383127 

42 background: #64991e; 

43 background: -webkit- gradient (linear, left top, left bottom, from(# 7db72f), to 

44 (#4e7d0e)); 

45 background: -moz- linear- gradient (top, #7db72f, #4e7d0e); 

46 filter: progid:DXImageTransform.Microsoft .gradient (startColorstr= 

47 "#7db72f', endColorstr= "#4e7d0e'); 

48 } 

49 

50 .green:hover { 

51 background: #538018; 

52 background: -webkit- gradient (linear, left top, left bottom, from(# 6b9d28), to 

53 (#436b0c)); 

54 background: -moz- linear- gradient (top, # 6b9d28, #436b0c); 

55 filter: progid:DXImageTransform.Microsoft .gradient (startColorstr= 

56 '# 6b9d28', endColorstr= '# 436b0c'); 

57 } 

58 

59 .green:active { 

60 Color: #a9cO8c; 

61 background: -webkit- gradient (linear, left top, left bottom, from(# 4e7d0e), to 

62 (# 7db72f) ) 7 

63 background: -moz- linear- gradient (top, #4e7d0e, #7db72f); 

64 filter: progid:DXImageTransform.Microsoft .gradient (startColorstr= 

65 '#4e7d0e', endColorstr= "#7db72f"); 

66 } 

67 

68 .bigrounded { 

69 一 webkit-border- radius: 2em; 

70 —moz- border- radius: 2em; 

71 border- radius: 2em; 

72 } 

3 

74 -medium { 

75 font- size: 12px; 

76 padding: .4em 1.5em .42em; 
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续 表 
序号 CSS 代码 
了 4 } 
78 
79 .small { 
80 font- size: llpx; 
81 padding: .2em lem .275em; 





3. 编写 网 页 090301. html 的 HTML 代码 


网 页 090301. html 的 HTML 代码 如 表 9-9 所 示 。 


表 9-9 网 页 090301. html 的 HTML 代码 








序号 HTML 代码 
01 | < !doctype html> 
02 <htmlL> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title>Css3 制 作 的 圆 角 渐变 效果 的 网 页 按钮 < /title> 
06 <link href="css/mainl.css" rel="stylesheet" type= "text/css"> 
07 </head> 
08 <body> 
09 <div> 
10 <a href="#" class= "button green"> Green< /a> 
11 <a href="#" class= "button green bigrounded"> Rounded< /a> 
2 <a href="#" class= "button green medium"> Medium< /a> 
13 <a href="#" class= "button green small"> Small</a> 
14 </div> 
15 < /body> 
16 </htm> 


4. 保存 与 浏览 网 页 090301. html 


保存 网 页 090301. html, 其 浏览 效果 如 图 9-6 所 示 。 


5. 定义 网 页 090302. html 的 CSS 代码 


网 页 090302. html 对 应 的 CSS 代码 如 表 9-10 所 示 。 


表 9-10 ”网 页 090302. html 对 应 的 CSS 代码 








并 和 CSS 代码 
01 .normal img { 
02 border: solid 5px #a9c08c; 
03 -Webkit-border- radius: 20px; 
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续 表 
序号 CSS 代码 

04 —moz— border- radius: 20px; 
05 border- radius: 20px; 
06 一 Webkit- box- shadow: inset 0 lpx 5px rgba(0,0,0, .5); 
07 —moz- box- shadow: inset 0 lpx 5px rgba (0,0,0, .5); 
08 box- shadow: inset 0 lpx 5px rgba (0,0,0, .5)7 
09 3 
10 
对 .Circle { 

2 position:relative; 
3 display:inline-block; 
14 width: 140px; 
15 height: 140px; 
16 -webkit-border- radius: 50em; 
17 —moz- border- radius: 50em; 
18 border- radius: 50em; 
0 } 

6. 编写 网 页 090302. html 的 HTML 代码 

网 页 090302. html 的 HTML 代码 如 表 9-11 所 示 。 

表 9-11 网 页 090302. html 的 HTML 代码 
序号 HTML 代码 

01 | < !doctype html> 
02 <html> 
03 <head> 
04 <meta charset= "utf- 8"> 
05 <title> 使 用 css3 实 现 圆 角 和 圆 形 图 片 < /title> 
06 <1link href= "css/main2.css" rel= "stylesheet" type= "text/css"> 
07 </head> 
08 <body> 
09 <span class="normal"> 
10 < img src= "images/01.jpg" width= "184" height= "144" alt= "imgl"> 
11 </span> 
12 <span class="circle" style="background:url (images/02.jpg) no- repeat center 
玉 center; "> 
14 </span> 
15 < /body> 
16 < /html> 





7. 保存 与 浏览 网 页 090302. html 
保存 网 页 090302. html, 其 浏览 效果 如 图 9-7 所 示 。 
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任务 9-4 设计 网 页 中 的 圆 形 导航 按钮 





【任务 描述 】 
创建 网 页 0904. html, 该 网 页 中 圆 形 导 航 按钮 的 浏览 效果 如 图 9-8 所 示 。 
0 @ 
智能 手机 功能 手机 手机 配件 
加 © 
平板 电脑 平板 配件 移动 网 络 











9-8 网 页 0904. html 中 圆 形 导航 按钮 的 浏览 效果 


【任务 飞 施 】 
1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0904, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 


然后 在 子 文件 夹 0904 中 创建 网 页 0904. html。 
2. 定义 网 页 0904. html 的 CSS 代码 


网 页 0904. html 的 CSS 代码 如 表 9-12 所 示 。 
表 9-12 网 页 0904. html 的 CSS 代码 





序号 CSS 代码 
01 img { 
02 border: 0; 
03 max- width: 100%; 
04 height: auto 
05 } 
06 
07 olulf{ 
08 list- style: none 
09 } 
10 
11 a:active,a:focus { 
12 outline: 0 
bp } 
14 而 浊 
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续 表 

序号 CSS 代码 

5 text— decoration: none; 

16 color: #111 

17 } 

18 

19 .Category { 

20 padding: lem 2em 0 

21 

2 .Category 1i { 

24 float: left; 

25 width: 33.3%; 

2 text- align: center; 

27 padding- bottom: 1.2em 

28 } 

29 

30 .Category i { 

3 margin- bottom: .9em 

32 } 

33 

34 .Category span { 

35 display: block; 

36 Color: #4e4e4e; 

37 font- size: 2em 

38 } 

39 sicon=1 { 

40 background: #5c83ce url (../images/icon01.png) 

41 no- repeat scrol1 0 0 

42 } 

43 

44 icon=2 { 

45 background: #db343e url(../images/icon02.png) 

46 no- repeat scrol1 00 

47 } 

48 

49 

50 .icon-3{ 

51 background: #3bc2ef url (../images/icon03.png) 

S52 no- repeat scroll 00 

53 } 

54 

0 .icon-4{ 

56 background: # 3bc2ef url (../images/icon04.png) 

57 no- repeat scroll1 0 0 

58 } 

59 

60 5 一 忆 和 
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续 表 

序号 CSS 代码 

61 background: #9ad24d url(../images/icon05.png) 

62 no- repeat scrol1 0 0 

63 } 

64 

65 .icon-61{ 

66 background: # ff619c url(../images/icon06.png) 

67 no- repeat scrol1 0 0 

68 

69 

70 .icon- category { 

71 display: inline-block; 

72 width: 4em; 

73 height: 4em; 

74 background- size: 100% 100%; 

75 border- radius: 50%; 

76 } 





3. 编写 网 页 0904. html 的 HTML 代码 


网 页 0904. html 的 HTML 代码 如 表 9-13 所 示 。 


表 9-13 网 页 0904. html 的 HTML 代码 














序号 HTML 代码 
01 <article class= "category"> 
02 <ul> 
03 <li><a href="#"><i class="icon- 1 icon- category"></i>< span> 智 能 手机 </ 
04 span></a></li> 
05 <li><a href="#"><i class="icon- 2 icon- category"></i>< span> 功 能 手机 </ 
06 span></a></1i> 
07 <li><a href="#"><i class="icon- 3 icon- category"></i><span> 手 机 配件 </ 
08 span></a></li> 
09 <li><a href="#"><i class="icon- 4 icon- category"></i>< span> 平 板 电 脑 </ 
10 span></a></li> 
11 <li><a href="#"><i class="icon- 5 icon- category"></i>< span> 平 板 配件 </ 
12 span></a></li> 
13 <li><a href="#"><i class="icon- 6 icon- category"></i>< span> 移 动 网 络 </ 
14 span></a></li> 
15 </ul> 
16 </article> 








4. 保存 与 浏览 网 页 
保存 网 页 0904. html, 其 浏览 效果 如 图 9-8 所 示 。 
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任务 9-5 网 页 中 实现 搜索 框 聚焦 变 长 的 效果 


【任务 模 迹 】 
创建 网 页 0905. html, 该 网 页 浏览 时 搜索 框 的 初始 效果 如 图 9-9 所 示 。 


Search. 


9-9 网 页 0905. html 浏览 时 搜索 框 的 初始 效果 


【任务 吝 施 】 


1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0905, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 
然后 在 子 文件 夹 0905 中 创建 网 页 0905. html。 


2. 定义 网 页 0905. html 的 CSS 代码 


网 页 0905. html 的 CSS 代码 如 表 9-14 所 示 。 


表 9-14 网 页 0905. html 的 CSS 代码 





序号 CSS 代码 
01 body { 
02 background: # ccc7 
03 } 
04 
05 # Search input [type= "text"] { 
06 background: url(../images/search- white.png) no- repeat 10px 6px # fcfcfc; 
07 border: lpx solid #dldldl; 
08 font: bold 12px Arial, Helvetica, Sans- serif; 
09 Color: #bebebe; 
10 width: 150px; 
D padding: 6px 15px 6px 35px; 
12 text- shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
3 — Webkit- border- radius: 20px; 
14 —moz- border- radius: 20px; 
15 border- radius: 20px; 
16 一 webkit- box- shadow: 0 lpx 3px rgba(0, 0, 0, 0.15) inset; 
17 —moz- box- shadow: 0 lpx 3px rgba(0, 0, 0, 0.15) inset; 
18 box- shadow: 0 lpx 3px rgba (0, 0, 0, 0.15) inset; 
19 —webkit- transition: all 0.7s ease 0s; 
20 —moz- transition: all 0.7s ease 0s; 
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续 表 
序号 CSS 代码 
2 -0o- transition: all 0.7s ease 0s; 
22 transition: all 0.7s ease 0s; 
23 } 


站 # search input [type= "text"] :focus { 
26 width: 200px; 
27 } 





3. 编写 网 页 0905. html 的 HTML 代码 


网 页 0905. html 的 HTML 代码 如 表 9-15 所 示 。 


表 9-15 网 页 0905. html 的 HTML 代码 





序号 HTML 代码 
01 < form method= "get" id= "search"> 
02 <input name= "q" type= "text" size="40" placeholder= "Search..."/> 


03 < /form> 





4. 保存 与 浏览 网 页 


保存 网 页 0905. html, 其 浏览 效果 如 图 9-9 所 示 。 网 页 中 搜索 框 获取 焦点 时 的 变 长 效 
果 如 图 9-10 所 示 。 


9-10 ”网 页 中 搜索 框 获取 焦点 时 的 变 长 效果 


任务 9-6 网 页 中 应 用 CSS 实现 超 酷 导航 菜单 


【任务 模 太 】 
创建 网 页 0906. html, 该 页 面 中 超 酷 导航 菜单 的 浏览 效果 如 图 9-11 所 示 。 


i 
i 


图 9-11 网 页 0906. html 中 超 酷 导航 菜单 的 浏览 效果 
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【任务 吝 施 】 


1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0906, 再 在 该 文件 夹 中 创建 css 子 文件 夹 。 然 后 在 
子 文件 夹 0906 中 创建 网 页 0906. html。 


2. 定义 网 页 0906. html 的 CSS 代码 


网 页 0906. html 的 CSS 代码 如 表 9-16 所 示 。 


表 9-16 网 页 0906. html 的 CSS 代码 








序号 CSS 代码 
01 ul.cssTabs { 
02 background: #848383; 
03 border: solid lpx #606060; 
04 padding: 0 75px; 
05 width: 450px; 
06 margin: 10px 0; 
07 font- size: 12px; 
08 font- weight: bold; 
09 background: -moz- linear- gradient (0% 100% 90deg,# 737373, #9a9a9a); 
10 background: - webkit- gradient (linear, 0% 0%, 0% 100%, from (# 9a9a9a), to (# 
11 737373)); 
12 box- shadow: inset 0 lpx 0 0 #dfdfdf; 
13 —moz- box- shadow: inset 0 lpx 0 0 #dfdfdaf; 
14 —webkit- box- shadow: inset 0 lpx 0 0 #dfafaf; 
15 border- radius: 8px 8px; 
16 —moz- border- radius: 8px 8px; 
17 -webkit-border- radius: 8px 8px; 
18 } 
19 
20 ul.cssTabs >li { 
4 background: #989898; 
多 Color: #3a3a3a; 
23 border: solid lpx # 606060; 
24 border- bottom: 07 
25 display: inline-block; 
26 margin: 10px lpx - lpx; 
Ft padding: 8px 20px; 
28 background: -moz- linear- gradient (0% 100% 90deg, # 9a9a9a, #888888); 
29 background: - webkit— gradient (linear, 0% 0%, 0% 100%, from (# 888888), to (# 
30 9a9a9a) ) 7 
31 box- shadow: inset 0 lpx 0 0 #dfdfdf; 
32 —moz- box- shadow: inset 0 lpx 0 0 #dfdfaf; 
3 —Wwebkit— box- shadow: inset 0 lpx 0 0 #dfdfaf; 
34 text— shadow: 1px lpx 0 #d3d3d3; 
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续 表 
序号 CSS 代码 
3 
36 1 
E74 
3 ul.cssTabs >1i.active,ul.cssTabs >1i:hover { 
background: #ededed; 
40 background: -moz- Linear- gradient (0% 100% 90deg,# £0f£0f£0, #d1d1d1) !important; 
background: - webkit- gradient (linear, 0% 0%, 0% 100%, from (# dldldl), to (# 
才 £0£0f£0) ) !important; 
box- shadow: inset 0 lpx 0 0 #fff; 
—moz- box- shadow: inset 0 lpx 0 0 #£ff; 
45 一 Webkit- box- shadow: inset 0 lpx 0 0 #fff; 
46 text- shadow: none; 
47 Cursor: pointer; 
48 
49 
50 ul.cssTabs.blue { 
EY background: #237e9f; 
a border- color: #20617f; 
53 background: -moz- linear- gradient (0% 100% 90deg,# 217092, #2d97b8); 
background: - webkit- gradient (linear, 0% 0%, 0% 100%, from (# 2d97b8), to (# 
217092)); 
6 box- shadow: inset 0 lpx 0 0 #a8e3f0; 
让 —moz- box- shadow: inset 0 lpx 0 0 #aBe3f0; 
58 —webkit- box- shadow: inset 0 lpx 0 0 #a8e3f£0; 
59 " 
60 
61 ul.cssTabs.blue >1i,ul.cssTabs.blue >li:hover { 
六 background: # 2ca0c17 
Color: #1a4760; 
> border- color: #20617f; 
background: -moz- linear- gradient (0% 100% 90deg,# 2calc3, #2687aa); 
background: - webkit- gradient (linear, 0% 0%, 0% 100%, from (# 2687aa), to (# 
6 2calc3)); 
6 box- shadow: inset 0 lpx 0 0 #a8e3f0; 
本 —moz- box— shadow: inset 0 lpx 0 0 #a8e3f0; 
ji —webkit— box- shadow: inset 0 lpx 0 0 #a8e3f07 
7 text- shadow: lpx lpx 0 #8cd9e8; 
六 
73 
ul.cssTabs.blue >1i.active { 
上 box- shadow: inset 0 lpx 0 0 #f£ff; 
一 moz-box- shadow: inset 0 lpx 0 0 #f£ff; 
和 一 Webkit-box- shadow: inset 0 lpx 0 0 #f£ff; 
78 text— shadow: none; 
3 
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3. 编写 网 页 0906. html 的 HTML 代码 


网 页 0906. html 的 HTML 代码 如 表 9-17 所 示 。 


表 9-17 网 页 0906. html 的 HTML 代码 





序号 HTML 代码 
01 <ul class= "cssTabs"> 
02 <1i class= "active"> 主页 </1i> 
03 <1i> 关 于 我 们 < /1i> 
04 <1i> 我 们 服务 < /1i> 
05 <1i> 联 系 我 们 < /1i> 
06 </ul> 
07 <ul class= "cssTabs blue"> 
08 <1i class="active"> Home< /1i> 
09 <1i>About us< /1i> 
10 <1i>Our Services< /1i> 
2 <1i>Contact us< /1i> 
好 </ul> 





4. 保存 与 浏览 网 页 
保存 网 页 0906. html, 其 浏览 效果 如 图 9-11 所 示 。 


任务 9-7 网 页 中 实现 仿 Office 风格 的 多 级 菜单 
【任务 榴 述 】 


创建 网 页 0907. html, 在 该 网 页 中 实现 仿 Office 风格 的 多 级 菜单 的 浏览 效果 如 
图 9-12 所 示 。 





Filev|Edit View ” Insert Format Tools Table Window Help 





















































多 New 
移 Open 
Close 
注 Save »|| 疆 ”Option 1 中超 OptionA 
急 savems 等 option2 各 optionB 
多 Print 图 Option 3 El ‘Option C 
你 Et 





9-12 ”网 页 0907. html 中 实现 仿 Office 风格 的 多 级 菜单 的 浏览 效果 
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【任务 吝 施 】 


1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0907, 再 在 该 文件 夹 中 创建 css 子 文件 夹 。 然 后 在 
子 文件 夹 0907 中 创建 网 页 0907. html。 


2. 定义 网 页 0907. html 的 CSS 代码 


网 页 0907. html 的 CSS 代码 如 表 9-18 所 示 。 


表 9-18 网 页 0907. html 的 CSS 代码 





序号 CSS 代码 
001 A 旭 

002 margin: 07 

003 padding: 0; 

004 : 

005 

006 #nav { 

007 position: relative; 

008 2z- index: 27 

009 } 

010 /* Download by http://www.codefans.net* / 
011 #navul { 

012 background- color: #B8D1F8; 
013 border: 1px solid # 000C80; 
014 height: 24px; 

015 list- style: none outside none; 
016 margin: 07 

017 padding: lpx; 

018 } 

019 

020 #mnavul ul { 

021 background- color: #FFFFFF; 
022 border: 1px solid # 8RA867R7 
023 display: none; 

024 height: auto; 

025 left: 0; 

026 padding: 07 

027 position: absolute; 

028 top: 25px; 

029 width: 168px; 

030 } 

031 

032 #navul ul ul { 

033 display: none; 
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续 表 
序号 CSS 代码 
034 left: 168px; 
035 position: absolute; 
036 top: -lprs 
037 width: 168px; 
038 
039 
040 #nav ul li{ 
041 float: left; 
042 margin- right: lpx; 
043 position: relative; 
044 } 
045 
046 #nav ul liaf 
047 border: lpx solid #B8D1F87 
048 Color: #000; 
049 Cursor: default; 
050 display: block; 
051 font: 11px Tahoma,Arial; 
052 padding: 3px 3px 4px; 
053 text- decoration: none; 
054 } 
055 .window { 
056 background- color: #FFF; 
057 border: lpx solid # 8A867A; 
058 border- top- width: 0; 
059 height: 240px; 
060 margin: 10px auto; 
061 width: 520px; 
062 } 
063 
064 #nav ul 1i span { 
065 background: Url ("../images/u.gif") 
066 no- repeat scroll 90% center transparent; 
067 border: lpx solid #B8D1F87 
068 Color: #000; 
069 Cursor: default; 
070 display: block; 
071 font: 11px Tahoma,Arial; 
072 padding: 3px 14px 4px 3px; 
073 position: relative; 
074 i 
075 
076 #nav ul ul 1i span { 
077 background: url ("../images/s.gif") 
078 no- repeat scroll 97% center transparent; 
079 } 
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续 表 
序号 CSS 代码 
080 
081 #navul ul li{ 
082 float: none; 
083 margin- right: 0; 
084 padding: lpx; 
085 text- indent: 10px; 
086 } 
087 
088 #nav ul ul li a,#nav ul ul li span { 
089 border: lpx solid transparent; 
090 padding: 3px 3px 5px 2px; 
091 } 
092 
093 #nav ul ul li a img,#nav ul ul li span img { 
094 border- width: 0; 
095 float: left; 
096 margin- right: 5px7 
097 Vertical-align: middle; 
098 } 
099 
100 #nav ul li:hover >a,#nav ul li:hover >span { 
101 background- color: #FFF2C8; 
102 border: lpx solid # 000C80; 
103 Color: #000; 
104 } 
105 
106 #nav ul li span:focus +ul,#nav ul li ul:hover { 
107 display: block; 
108 } 





3. 编写 网 页 0907. html 的 HTML 代码 


网 页 0907. html 的 HTML 代码 如 表 9-19 所 示 。 


表 9-19 网 页 0907. html 的 HTML 代码 








序号 HTML 代码 
01 <div class= "window"> 
02 <div id= "nav"> 
03 <ul> 
04 <1i>< span tabindex="]1">File< /span> 
05 <ul> 
06 <1li><a href=#"><img src="images/iconl.gif" alt="1"/>New< /a></1i> 
07 <li><a href="# "><img src- "images/icon2.gif" alt= "2"/>Open</a></1i> 
08 <li><a href="#"><img src="images/icon3.gif" alt="3"/>Close< /a></1i> 
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续 表 
序号 HTML 代码 
09 <1i><span tabindex="1"> < img src="images/icon4.gif" alt="4"/> Save< /span 
10 > 
11 <ul> 
12 <1i><span tabindex="1">< img src= "images/icon4.gif" alt="4"/>Option 1</ 
13 span> 
14 <ul> 
15 <1li><a href="#"><img src="images/iconl.gif" alt="1"/>Option A< /a>< 
16 /li> 
17 <1i><a href="#"><img src="images/icon2.gif" alt="2"/>Option B</a>< 
18 /li> 
19 <1li><a href="#"><img src="images/icon3.gif" alt="3"/>Option C< /a>< 
2 /li> 
和 </ul></1i> 
22 <1li><a href="#"><img src= "images/icon2.gif" alt= "2"/>Option 2</a></1i 
23 新 
24 <1li><a href="#"><img src= "images/icon3.gif" alt="3"/>Option 3</a></1li 
25 > 
26 </ul> 
27 </1i> 
28 <1li><a href="#"><img src= "images/icon5.gif" alt= "5"/>Save Rs< /a> 
29 </1i> 
30 <1li><a hre 人 只 "<jmg src= "images/icon1.gif" alt="l"/>Print</a></1i> 
31 <li><a href=#"><img src="images/icon?2.gif" alt="2"/>Exit</a></li> 
32 </ul> 
33 </1i> 
34 <1i>< span tabindex="1">Edit< /span> 
35 <ul> 
36 <li><a href=#"><img src= "images/icon1.gif" alt="l"/>Cut</a></1i> 
37 <li><a href=# "><img src= "images/icon2.gif" alt="2"/>Copyc/a></1i> 
38 <1i><a href=#"><img src= "images/icon3.gif" alt="3"/>Paste< /a></li> 
39 </u> 
40 </li> 
41 <1i>< span tabindex= "1">View< /span> 
42 <u> 
43 <li><a href="#"><img src= "images/icon1.gif" alt="1"/>Normal< /a> 
44 </li> 
45 <li><a href= "# ">< jmg src="images/icon2.gif" alt= "2"/>Web Layout</a></1i 
46 > 
47 <1li><a href="#"><img src= "images/icon3.gif" alt= "3"/>Print Layout< /a>< 
48 Pe 
49 </u> 
50 </li> 
51 <1li><a href="#">Insert</a></li> 
52 <1i><a href="#">Format</a></li> 
53 <1i><a href="#">Tools</a></li> 
54 <li><a href="#">Table< /a></li> 
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续 表 
序号 HTML 代码 
55 <1li><a href="#">Window< /a>< /1i> 
56 <1li><a href="#">Help< /a></1li> 
57 </ul> 
58 </div> 


59 </div> 





4. 保存 与 浏览 网 页 
保存 网 页 0907. html, 其 浏览 效果 如 图 9-12 所 示 。 


任务 9-8 网 页 中 实现 图 片 拖 动 操作 


【任务 模 述 】 
创建 网 页 0908. html, 该 网 页 的 初始 浏览 效果 如 图 9-13 所 示 。 





温 声 提示 : 可 以 将 图 片 直接 拖 到 目的 地 


图 片 源 

=， Wh 
| -| 一 
De B= 


拖 到 目的 地 








图 9-13 ”网 页 0908. html 的 初始 浏览 效果 


【任务 误 邦 】 


1. 创建 文件 夹 和 网 页 


在 文件 夹 Unit09 中 创建 子 文件 夹 0908, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 
然后 在 子 文件 夹 0908 中 创建 网 页 0908. html。 
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2. 定义 网 页 0908. html 的 CSS 代码 


网 页 


0908. html 的 CSS 代码 如 表 9-20 所 示 。 


表 9-20 网 页 0908. html 的 CSS 代码 





序号 CSS 代码 序号 CSS 代码 
01 |#info{ 17 |#trash { 
02 padding- left:40px 18 border: 3px dashed #ccc; 
03 |} 19 float: left; 
04 |#album { 20 margin: 10px; 
05 border: 3px dashed #ccc; 21 pagding: 10px; 
06 float: left; 22 width: 400px; 
07 margin: Opx 10px Spx; 23 height: 130px; 
08 pagdding: 10px; 24 clear: letts 
09 width: 400px; 25 |} 
10 height: 130px; 26 
11 } 27 |#albump,#trashp { 
12 |#album img,#trash img { 28 line- height: 25px; 
13 margin: 3px; 29 margin: Opx; 
14 height: 90px; 30 Padding: 5px7 
15 width: 120px; 31 height: 25px; 
i16 |} 2 |} 














3. 编写 网 页 0908. html 的 HTML 代码 


网 页 0908. html 的 HTML 代码 如 表 9-21 所 示 。 


表 9-21 网 页 0908. html 的 HTML 代码 








序号 HTML 代码 
01 <div id= "info"> 
02 <h3> 温 声 提 示 :可 以 将 图 片 直 接 拖 到 目的 地 < /h3> 
03 </div> 
04 <div id="album"> 
05 <p> 图 片 源 < /p> 
06 < img src= "images/01.jpg" id= "imgl" draggable= "true"/> 
07 < img src= "images/02.jpg" id= "img2" draggable= "true"/> 
08 < img src= "images/03.jpg" id= "img3" draggable= "true"/> 
09 </div> 
10 <div id= "trash"> 
11 <p> 拖 动 目的 地 < /p> 
12 </div> 
13 <script src="js/drag.js" type= "text/javascript">< /script> 





4. 编写 网 页 0908. html 的 JavaScript 代码 实现 图 片 拖 动 功能 


网 页 
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表 9-22 网 页 0908. html 中 实现 图 片 拖 动 功能 的 JavaSeript 代码 








序号 JavaScript 代码 
01 var info =document.getElementById("info")7 
02 “| // 获 得 被 拖 动 的 元 素 , 这 里 为 图 片 所 在 的 div 
03 Var src =document .getElementById ("album"); 
04 var dragImgId; 
05 “| // 开 始 拖 动 操作 
06 src.ondragstart =function(e) { 
07 // 获 得 被 拖 动 的 图 片 ID 
08 dragImgId =e.target .id; 
09 // 获 得 被 拖 动 元 素 
10 Var dragImg = document .getElementById (dragImgId); 
于 // 拖 动 操作 结束 
12 dragImg.ondragend = function (e) { 
13 // 恢 复 提醒 信息 
14 info.innerHTML ="<h3> 温 区 提示 :可 以 将 图 片 直接 拖 到 目的 地 < /h3> "7 
15 Bs 
16 e.dataTransfer.setData ("text", dragImgId); 
好 Ww 
18 “| // 拖 动 过 程 中 
19 src.ondrag =function(e) { 
20 info.innerHTML ="<h3>-- 图 片 正在 被 拖 动 --< /h3>"; 
21 } 
22 | // 获 得 拖 动 的 目标 元 素 
Var target =document .getElementById ("trash"); 
24 “| // 关 闭 默认 处 理 
25 target .ondragenter =function(e) { 
26 e.preventDefault (); 
27 } 
28 target .ondragover = function(e) { 
29 e.preventDefault (); 
30 } 
31 | // 有 图 片 拖 动 到 了 目标 元 素 
32 target .ondrop =function(e) { 
33 Var draggedID =e.dataTransfer.getData ("text"); 
34 // 获 取 图 片 中 的 DOM 对 象 
35 Var oldElem = document .getElementById (draggedID); 
36 // 从 图 片 DIV 中 删除 该 图 片 的 节点 
37 oldElem.parentNode.removeChild (oldElem); 
38 // 将 被 拖 动 的 图 片 DOM 节 点 添加 到 目的 地 DIV 中 
39 target .appendChild (oldElem); 
40 info.innerHTML ="<h3> 温 馨 提示 :可 以 将 图 片 直接 拖 到 目的 地 < /h3> "; 
41 e.preventDefault () 7 
42 } 


5. 保存 与 浏览 网 页 
保存 网 页 0908. html, 其 初始 浏览 效果 如 图 9-13 所 示 。 在 网 页 0908. html 中 将 图 片 


253 


HTML5+ CSS3 跨 平 台 网 页 设计 实例 教程 





源 的 两 张 图 片 拖 到 目的 地 后 的 效果 如 图 9-14 所 示 。 





温 志 提示: 可 以 将 图 片 直 接 拖 到 目的 地 


图 片 源 














9-14 在 网 页 0908. html 中 将 图 片 源 的 两 张 图 片 拖 到 目的 地 后 的 效果 


【同步 训练 】 


任务 9-9 网 页 中 不 同 的 节假日 显示 
不 同 的 问候 语 


创建 网 页 0909. html, 在 该 网 页 中 应 用 JavaScript 的 if 语句 实现 不 同 的 节假日 显示 
不 同 的 问候 语 ,具体 要 求 如 下 。 

(1) 非 节 假日 显示 “天 天 快乐 1”。 

(2) 1 月 1 日 显示 “元 旦 快乐 !”。 

(3) 5 月 1 日 显示 “五 一 劳动 节 快乐 1”。 

(4) 10 月 1 日 显示 “国庆 节 快 乐 !”。 

提示 : 在 不 同 节假日 显示 不 同 问候 语 的 JavaScript 代码 如 表 9-23 所 示 。 


表 9-23 在 不 同 节 假日 显示 不 同 问候 语 的 JavaScript 代码 








行 号 JavaScript 代码 
01 < script language= "JavaScript" type= "text/javascript"> 
02 i 
03 var msg= "天 天 快乐 "; 
04 Var now= new Date (); 
05 Var month= now.getMonth ()+1; 
06 Var Date=now.getDate ()7 
07 if (month==1 && Date-=1)  {msg=- "元旦 快乐 !";} 
08 证 (month==5 && Date==1) {msg- "五 一 劳动 节 快 乐 !";} 
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续 表 
行 号 JavaScript 代码 
09 if (month==10 && Date==1) {msg= "国庆 节 快 乐 !";} 
10 document .write (msg); 
11 HI==¥ 


2 </script> 





任务 9-10 网 页 中 创建 下 拉 导 航 菜单 


创建 网 页 0910. html, 浏 览 该 网 页 ,然后 将 鼠标 指向 下 拉 菜 单项 ,如 图 9-15 所 示 。 








Home About Services Products Contact 





Web Design 
App Development 


Email Campaigns 





Copyrighting dh 





图 9-15 网 页 0910. html 中 菜单 的 初始 浏览 效果 
提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 
【技术 进 阶 】 
1. CSS 盒 模型 尺寸 的 计算 
提示 : 请 扫描 二 维 码 查看 相关 内 容 。 


2. 幅 套 div 区 域 的 尺寸 计算 


在 网 页 布局 中 经 常 使 用 div 嵌 套 结构 , 即 一 个 元 素 中 包含 男 一 个 元 
素 , 从 结构 上 讲 属 于 嵌 套 或 包含 关系 ,外 面 的 元 素 称 为 父 元 素 ,里 面 的 元 
素 称 为 子 元 素 。 骨 套 div 内 容 部 分 尺寸 的 计算 受 div 外 边 距 、 边 框 和 内 
边 距 宽度 的 影响 , 子 元 素 的 外 边 距 、 边 框 和 内 边 距 都 被 包含 在 父 元 素 的 
内 容 框 里 面 。 


【问题 探究 】 


【问题 1】 Dreamweaver CC 制作 网 页 特效 的 常用 方法 有 哪些 ? 
Dreamweaver CC 制作 网 页 特效 的 常用 方法 有 : 
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(1) 使 用 HTML 标签 制作 网 页 特效 。 

(2) 使 用 CSS 样式 制作 网 页 特效 。 

(3) 使 用 JavaScript 程序 制作 网 页 特效 。 

(4) 使 用 行为 制作 网 页 特效 。 

在 Dreamweaver CC 中 预 设 了 一 些 行为 ,通过 行为 可 以 轻松 地 制作 出 一 些 网 页 特效 ， 
使 网 页 具有 一 些 动感 效果 。Dreamweaver CC 以 可 视 化 的 方法 设置 行为 ,插入 行为 时 
Dreamweaver CC 自动 给 网 页 添加 了 一 些 JavaScript 代码 ,这 些 代码 能 够 实现 动感 网 页 的 
效果 。 可 以 将 行为 附加 到 整个 文档 ,可 以 附加 到 链接 、 图 像 、 表 单元 素 或 其 他 页 面 元 素 。 
也 可 以 为 每 个 事件 指定 多 个 动作 。 

Dreamweaver CC 中 ,一 个 行为 是 由 一 个 事件 和 一 个 动作 结合 后 形成 的 ,动作 由 预先 
写 好 的 能 够 执行 某 种 任务 的 JavaScript 代码 组 成 ;而 事件 与 浏览 者 的 操作 相关 ,例如 单 击 
鼠标 等 。 动 作 只 有 在 某 个 事件 发 生 时 才 被 执行 。 当 给 页 面 的 元 素 添加 行为 时 ,要 指定 激 
活动 作 的 事件 。 

(5) 使 用 插件 制作 网 页 特效 。 

Dreamweaver CC 可 以 添加 第 三 方 开 发 的 插件 ,扩展 Dreamweaver 的 功能 ,以 实现 更 
多 的 网 页 特效 。 

【问题 2】 JavaScript 的 特点 有 哪些 ? 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 脚本 语言 。 使 用 它 的 目的 是 与 HTML 超 
文本 标记 语言 一 起 实现 网 页 中 的 动态 交互 功能 。 通 过 嵌入 或 调用 JavaScript 代码 在 标准 
的 HTML 语言 中 实现 其 功能 , 它 与 HTML 标签 结合 在 一 起 ,弥补 了 HTML 语言 的 不 
足 ,JavaScript 使 得 网 页 变 得 更 加 生动 。 

JavaScript 是 一 种 脚本 编程 语言 , 它 的 基本 语法 与 C 语言 类 似 , 但 运行 过 程 中 不 需要 
单独 编译 ,而 是 逐 行 解 释 执行 ,运行 速度 快 。JavaScript 具有 路 平台 性 ,与 操作 环境 无 关 ， 
只 依赖 于 浏览 器 本 身 , 只 要 是 在 支持 JavaScript 的 浏览 器 上 就 能 正确 执行 。 

【问题 3】 JavaScript 的 常量 有 哪 几 种 类 型 ? 各 有 何 特点 ? 

JavaScript 有 6 种 基本 类 型 的 常量 。 

(1) 整 型 常量 : 整 型 常量 是 程序 运行 过 程 中 不 能 改变 的 数据 ,可 以 使 用 十 进 制 .十 六 
进 制 .八进制 表示 其 值 。 

(2) 实 型 常量 : 实 型 常量 由 整数 部 分 加 小 数 部 分 表示 ,可 以 使 用 科学 表示 法 或 标准 
方法 来 表示 。 

(3) 布尔 值 : 布尔 常量 有 True 或 False 两 种 值 ,主要 用 来 说 明 或 代表 一 种 状态 或 
标志 。 

(4) 字符 型 常量 : 使 用 单 引号 (') 或 双 引 号 ("”") 括 起 来 的 一 个 或 几 个 字符 。 

(5) 空 值 : JavaScript 中 有 一 空 值 NULL, 表 示 什 么 也 没有 。 如 果 试 图 引用 没有 定义 
的 变量 , 则 返回 一 个 NULL 值 。 

(6) 特殊 字符 : JavaScript 中 包含 以 反 斜 枉 (/) 开 头 的 特殊 字符 ,通常 称 为 控制 字符 。 

【问题 4】 JavaScript 变量 的 命名 规则 有 哪些 ? 变量 有 了 哪 几 种 类 型 ? 如 何 声明 变量 ? 

(1) 变量 的 命名 必须 以 字母 开头 ,中 间 可 以 出 现 字 母 , 数 字 、 下 面 线 (_) ,变量 名 不 能 
256 





单元 9 网 页 中 特效 与 交互 的 应 用 设计 


有 空格 “十 ”或 “一 ”等 字符 ,JavaScript 的 关键 字 不 能 作 变 量 名 。 

(2) 变量 有 4 种 类 型 : 整 型 变量 . 实 型 变量 ,布尔 型 变量 .字符 串 变 量 。 

(3) JavaScript 变量 在 使 用 前 可 以 使 用 var 关键 字 先 进行 声明 ,并 且 可 以 赋 初 值 。 
JavaScript 中 变量 也 可 以 先 不 予以 声明 ,而 是 在 使 用 时 根据 数据 类 型 来 确定 其 变量 的 类 
型 ,但 是 这 样 可 能 会 引起 混乱 ,建议 变量 使 用 前 先进 行 声明 。 

【问题 5】 JavaScript 常用 的 运算 符 有 哪 几 种 ? 表达 式 有 哪 几 种 ? 

JavaScript 常用 的 运算 符 有 : 算术 运算 符 ( 包 括 十 ,一 、x* 、/、% 、 十 十 .一 一 ) ,比较 运 
算 符 (包括 二 .二 = 、>、 > 一、 一 一 、! 一 ) ,逻辑 运算 符 (&& 、||、0 ,赋值 运算 符 ( 王 ) ,条件 
运算 符 (? : ) 以 及 其 他 类 型 的 运算 符 。 

JavaScript 的 表达 式 可 以 分 为 算术 表达 式 、. 字 符 串 表达 式 、. 赋 值 表 达 式 和 逻辑 表 
达 式 。 
【问题 6】 JavaScript 的 条 件 语句 有 哪 几 种 ? 各 自 的 特点 是 什么 ? 
(1) 让 语句 。 

(2) if...else 语 句 。 

(3) switch 语句 。 

【问题 7】 JavaScript 的 循环 语句 有 哪 几 种 ? 各 自 的 语法 格式 和 执 
行规 则 如 何 ? 

JavaScript 中 提供 了 三 种 循环 语句 : for 语句 、while 语句 、do. . . 
while 语句 ,同时 还 提供 了 break 语句 (用 于 跳出 循环 ) continue 语句 
(用 于 终止 当前 循环 并 继续 执行 一 轮 循 环 ) ,以 及 标号 语句 。 eT 

【问题 8】 JavaSeript 中 有 几 种 全 局 函数 ,如 何 定义 Javaseript 的 、 轩 光 : 
函数 ? 

JavaScript 有 以 下 7 个 全 局 函数 : escape()、eval(),isFinite()、isNaN()、parseFloat()、 
parseInt() .unescape() ,用 于 完成 一 些 常 用 的 功能 。 

JavaScript 函数 的 定义 格式 如 下 : 

function 函数 名 称 (参数 表 ) 

{ 

函数 执行 部 分 ; 
return 表达 式 ; 

} 


函数 定义 中 的 return 语句 用 于 返回 函数 的 值 。 

【问题 9】 JavaScript 的 常用 的 事件 有 哪些 ? 这 些 事件 如 何 被 触发 ? 
JavaScript 常用 的 事件 有 以 下 几 种 。 

(1) onClick 事件 : 单 击 鼠 标 按钮 时 触发 onClick 事件 。 

(2) onDblClick 事件 : 双击 鼠标 按钮 时 触发 onDblClick 事件 。 

(3) onLoad 事件 : 当前 网 页 被 显示 时 触发 onLoad 事件 。 

(4) onMouseDown 事件 : 按 下 鼠标 按钮 时 触发 onMouseDown 事件 。 
(5) onMouseUp 事件 : 松 开 鼠标 按钮 时 触发 onMouseUp 事件 。 
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(6) onMouseOver 事件 : 鼠标 光标 移动 到 页 面 元 素 上 方 时 触发 onMouseOver 事件 。 

(7) onMove 事件 : 窗口 被 移动 时 触发 onMove 事件 。 

(8) onReset 事件 : 页 面 上 表单 元 素 的 值 被 重 置 时 触发 onReset 事件 。 

(9) onSubmit 事件 : 页 面 上 表单 被 提交 时 触发 onSubmit 事件 。 

(10) onUnload 事件 : 当前 的 网 页 被 关闭 时 触发 onUnload 事件 。 

【问题 10】 说 明 JavaScript 对 象 的 层次 结构 。 

可 以 将 JavaScript 对 象 分 为 四 个 层次 。 

第 一 层次 : JavaScript 对 象 的 层次 结构 中 最 顶层 的 对 象 是 窗口 对 象 (window) , 它 代 表 当 
前 的 浏览 器 窗口 。 该 对 象 包括 许多 属性 方法 和 事件 ,编程 人 员 可 以 利用 这 些 对 象 控制 浏览 
窗口 。window 对 象 常用 的 方法 有 : open() ,close() ,alert() .confirm() .prompt() 。 

第 二 层次 : 窗口 对 象 window 之 下 是 文档 (document)、 浏 览 器 Cnavigator)、 屏 幕 
(screen) ,事件 (event) ,框架 (frame) ,历史 (history) 、 地 址 (location) 。 

第 三 层次 : 文档 对 象 之 下 包括 表单 (form)、 图 像 (image)、 链 接 (link)、 锚 对 象 
(anchor) 等 多 种 对 象 。 浏 览 器 对 象 之 下 包括 MIME 类 型 对 象 (mimeType)、 插 件 对 象 
(plugin) 等 。 

第 四 层次 : 表单 对 象 之 下 包括 按钮 (button)、 复 选 框 (checkbox)、 单 选 按 钮 (radio)、 
文件 域 (fileUpload) 等 。 

【问题 11】 简 述 JavaScript 的 主要 对 象 及 其 功能 。 

(1) window 对 象 。window 对 象 代表 当前 窗口 ,是 每 一 个 已 打开 的 浏览 器 窗口 的 父 
对 象 , 包 含 了 document .navigator location ,history 等 子 对 象 。 

(2) document 对 象 。document 对 象 代表 当前 浏览 器 窗口 中 的 文档 ,使 用 它 可 以 访 
问 到 文档 中 的 对 象 ,例如 图 像 .表单 等 。 

(3) navigator 对 象 。 提 供 了 浏览 器 环境 的 信息 ,包括 浏览 器 的 版 本 号 、 运 行 的 平台 
等 信息 。 

(4) location 对 象 。 表 示 窗 口中 显示 的 当前 网 页 的 URL 地 址 ,可 以 使 用 该 对 象 让 浏 
览 器 打开 某 网 页 。 

(5) history 对 象 。 表 示 窗 口中 最 近 访 问 网 页 的 URL 地 址 。 

【问题 12】 JavaScript 常用 的 内 置 对 象 有 哪 几 种 ? 

JavaScript 常用 的 内 置 对 象 有 以 下 几 种 。 

(1) String 对 象 。 一 般 利用 String 对 象 提 供 的 函数 来 处 理 字 符 串 。String 对 象 字 符 
串 的 处 理 主 要 提供 了 以 下 方法 : substring () 、charAt() indexOf () 、lastIndexOf ()、 
toLowerCase() toUpperCase() 。 

(2) Math 对 象 。Math 对 象 包含 用 于 各 种 数学 运算 的 属性 和 方法 ,Math 对 象 的 内 置 
方法 可 以 在 不 使 用 构造 函数 创建 对 象 的 情况 下 直接 调用 。 调 用 形式 如 下 : 


Math. 数 学 函数 (参数 ) 
例如 计算 cos(r/6) ,可 以 写成 : 


Math.cos (Math.PI/6) 
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(3) Date 对 象 。Date 对 象 也 就 是 日 期 对 象 ,日 期 对 象 主要 用 于 从 系统 中 获得 当前 的 
日 期 和 时 间 、 设 置 当 前 的 日 期 和 时 间 、 在 时 间 和 日 期 同 字符 串 之 间 转 换 。 

日 期 对 象 使 用 前 ,必须 使 用 new 声明 一 个 新 的 对 象 实体 ,然后 通过 该 对 象 实体 调用 
其 方法 。 创 建 Date 对 象 时 没有 给 定 参数 ,新 对 象 就 被 设置 为 当前 日 期 ;如 果 给 定 参数 , 则 
新 对 象 就 表示 指定 的 日 期 和 时 间 。 

日 期 对 象 的 方法 getMonth() 返 回 当前 日 期 中 月 份 的 整数 (0 一 11) ;方法 getDay() 返 
回 一 个 整数 ,表示 星期 中 的 某 一 天 (0 一 6,0 表示 星期 日 ,6 表示 星期 六 ) 。 

(4) Array 对 象 。Array 对 象 也 就 是 数组 对 象 ,利用 new 构造 数组 对 象 。JavaScript 
和 CC 语言 一 样 , 数 组 的 下 标 从 0 开始 的 ,创建 数组 后 ,能 够 用 “[ ]” 符 号 访问 数组 元 素 。 

【问题 13】 编写 JavaScript 程序 时 如 何 正确 引用 JavaScript 对 象 ? 

JavaScript 中 引用 对 象 时 根据 对 象 的 包含 关系 ,使 用 成 员 引 用 操作 符 “. ”一 层 一 层 地 
引用 对 象 。 例 如 ,如 果 要 引用 document 对 象 ,应 使 用 window. document, 由 于 window 对 
象 是 默认 的 最 上 层 对 象 , 因 此 引用 其 子 对 象 时 ,可 以 不 使 用 window, 而 直接 使 用 
document 引用 document 对 象 。 

当 引 用 较 低 层次 的 对 象 时 ,一 般 有 两 种 方式 : 使 用 对 象 索引 或 使 用 对 象 名 称 (或 
ID) ,例如 ,如 果 要 引用 网 页 文档 中 第 一 个 表单 对 象 ,可 以 使 用 document. forms[0] 的 形式 
来 引用 ; 如 果 该 表单 的 name 属性 为 forml (或 者 ID 属性 为 form1), 则 也 可 以 用 
document. forms[ "forml"] 的 形式 或 直接 使 用 documentl. forml 的 形式 来 引用 该 表单 。 
如 果 在 名 称 为 forml 的 表单 中 包括 一 个 名 称 为 textl 的 文本 框 , 则 可 以 用 document. 
forml. textl 的 形式 来 引用 该 文本 框 对 象 。 

对 于 不 同 的 对 象 ,通常 还 有 一 些 特 殊 的 引用 方法 ,例如 ,如 果 要 引用 表单 对 象 中 包含 
的 对 象 ,可 以 使 用 elements 数组 ;引用 当前 对 象 可 以 使 用 this。 

内 置 对 象 都 有 自己 的 方法 和 属性 ,访问 的 方法 如 下 : 

(1) 对 象 名 . 属性 名 称 。 

(2) 对 象 名 .方法 名 称 (参数 表 ) 。 

【问题 14】 JavaScript 脚本 程序 常用 的 开发 工具 有 哪些? 

编写 与 调试 JavaScript 脚本 程序 的 工具 有 多 种 ,目前 常用 的 工具 有 Dreamweaver、 
Firebug、Visual Studio、Aptana JavaScript Editor 等 。 

(1) Dreamweaver。Dreamweaver 是 世界 顶级 软件 厂商 Adobe 推出 的 一 套 制作 并 编 
辑 网 站 和 移动 应 用 程序 的 专业 网 页 设计 软件 ,由 于 它 支 持 代码 , 拆 分 、 设 计 、 实 时 视图 等 多 
种 方式 来 创作 、 编 写 和 修改 网 页 ,无 须 编写 任何 代码 就 能 快速 创建 Web 页 面 。 

(2) Firebug。Firebug 是 一 个 用 于 网 站 前 端 开发 的 工具 , 它 是 Firefox 浏览 器 的 一 个 
扩展 插件 , 它 集 HTML 查看 和 编辑 JavaScript 控制 台 、 网 络 状况 监视 器 于 一 体 ,可 以 用 
于 调试 JavaScript、 查 看 DOM ,分析 CSS 以 及 Ajax 交互 等 。Firebug 的 官方 网 站 的 网 址 
为 http: //getfirebug. com/。 

(3) Visual Studio。Visual Studio 是 Microsoft 公司 推出 的 程序 集成 开发 环境 ， 
Visual Studio 2008 版 本 之 后 就 可 以 使 用 jQuery 智能 提示 功能 了 。 

(4) Aptana。Aptana 是 一 个 功能 非常 强大 .开源 和 专注 于 JavaScript 的 Ajax 开发 。 
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支持 jQuery 代码 自动 提示 功能 。 

【问题 15】 典型 的 JavaSceript 框架 有 哪些 ? 

JavaScript 高 级 程序 设计 (特别 是 对 浏览 器 差异 的 复杂 处 理 ) 通 常 很 困难 也 很 耗 时 ， 
为 了 简化 JavaScript 的 开发 ,许多 的 JavaScript 库 应 运 而 生 。 这 些 JavaScript 库 常 被 称 为 
JavaScript 框架 。 这 些 库 封装 了 很 多 预定 义 的 对 象 和 实用 函数 ,能 帮助 使 用 者 轻松 建立 
有 高 难度 交互 的 富 客户 端 页 面 ,并 且 兼 容 各 大 浏览 器 。jQuery 是 继 Prototype 之 后 又 一 
个 优秀 的 JavaScript 库 ,是 一 个 由 John Resig 创建 于 2006 年 1 月 的 开源 项 目 。 

广 受 欢迎 的 JavaScript 框架 有 jQuery、Prototype、MooTools, 所 有 这 些 框架 都 提供 
针对 常见 JavaScript 任务 的 函数 ,包括 动画 .DOM 操作 以 及 Ajax 处 理 。 

(1) jQuery。jQuery 是 目前 最 受 欢 迎 的 JavaScript 库 , 它 使 用 CSS 选择 器 来 访问 和 
操作 网 页 上 的 HTML 元 素 (DOM 对 象 ) ,jQuery 同时 提供 companion UI( 用 户 界 面 ) 和 
插件 。 目 前 Google、Microsoft、IBM、Netflix 等 许多 大 公司 在 网 站 上 都 使 用 了 jQuery。 

(2) Prototype。Prototype 是 一 种 JavaScript 库 ,提供 用 于 执行 常见 Web 任务 的 简 
单 API。API 是 应 用 程序 编程 接口 (Application Programming Interface) 的 缩写 , 它 是 包 
含 属 性 和 方法 的 库 , 用 于 操作 HTML DOM。Prototype 通过 提供 类 和 继承 ,实现 了 对 
JavaScript 的 增强 。 

(3) MooTools。MooTools 也 是 一 个 JavaScript 库 ,提供 了 可 使 常见 的 JavaScript 编 
程 更 为 简单 的 API, 也 包含 一 些 轻 量 级 的 效果 和 动画 函数 。 

【问题 16】 举例 阐述 jQuery 的 选择 器 。 

jQuery 的 选择 器 就 是 “选择 某 个 网 页 元 素 , 然 后 对 其 进行 某 种 操 
作 ”, 使 用 jQuery 的 第 一 步 ,往往 就 是 将 一 个 选择 表达 式 放 进 构造 函数 
jQuery() (简写 为 $ ) ,然后 得 到 被 选中 的 元 素 。 

jQuery 的 选择 器 允许 对 元 素 组 或 单个 元 素 进 行 操作 。 jQuery 元 素 
选择 器 和 属性 选择 器 通过 标签 名 、 属 性 名 或 内 容 对 HTML 元 素 进 行 选择 。jQuery 使 用 
CSS 选择 器 来 选取 HTML 元 素 ,使 用 路 径 表 达 式 来 选择 带 有 给 定 属性 的 元 素 。 

【问题 17】 举例 说 明 jQuery 的 链 式 操作 。 

jQuery 有 一 种 名 为 链接 (chaining) 的 技术 ,人 允许 我 们 在 相同 的 元 素 上 运行 多 条 
jQuery 命令 ,允许 将 所 有 操作 连接 在 一 起 ,以 链条 的 形式 写 出 来 。 

链接 (Chaining) 是 一 种 在 同一 对 象 上 执行 多 个 任务 的 便捷 方法 。jQuery 会 抛 掉 多 余 
的 空格 ,并 按照 一 行 长 代码 来 执行 上 面 的 代码 行 。 这 样 浏览 器 就 不 必 多 次 查找 相同 的 元 
素 。 如 需 链接 一 个 动作 ,只 需 简单 地 把 该 动作 追加 到 之 前 的 动作 上 。 

下 面 的 示例 把 css() ,slideUp() slideDown() 链 接 在 一 起 。demo 元 素 首先 会 变 为 红 
色 , 再 向 上 滑动 ,然后 向 下 滑动 。 





$("# demo") .css ("color", "red") .slideUp (2000) .slideDown (2000); 


如 果 需 要 ,我 们 也 可 以 添加 多 个 方法 调用 。 

提示 : 当 进 行 链接 时 ,代码 行 会 变 得 很 差 。 不 过 ,jQuery 在 语法 上 不 是 很 严格 ;可 以 
使 用 折 行 和 缩 进来 增强 代码 的 可 读 性 ,这 样 写 并 不 会 影响 代码 的 运行 结果 。 例 如 : 
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$ ("#demo") .css ("color", "red") // 设 置 颜色 
.slideUp (2000) // 向 上 滑动 
.slideDown (2000); // 向 下 滑动 


链 式 操作 是 jQuery 中 最 令 人 称道 ,最 方便 的 特点 。 它 的 原理 在 于 每 一 步 的 jQuery 
操作 ,返回 的 都 是 一 个 jQuery 对 象 ,所 以 不 同 操作 可 以 连 在 一 起 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答题 

(五 ) 编程 题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 
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使 用 HTML 十 CSS 进行 网 页 布局 ,能 够 真正 做 到 Web 标准 所 要 求 的 网 页 内 容 与 表 
现 相 分 离 ,CSS 代码 可 以 更 好 地 控制 元 素 定位 ,使 用 外 边 距 边框 ,颜色 等 属性 可 以 设置 
格式 ,从 而 使 网 站 的 维护 更 加 方便 和 快捷 。 网 页 整体 的 布局 结构 通常 有 两 列 式 、 三 列 式 和 
多 列 式 等 多 种 形式 。 

两 列 式 网 页 布局 是 较 常 用 的 网 页 整体 布局 方式 ,两 列 式 布局 可 以 使 用 浮动 布局 或 者 
层 布局 实现 ,实现 方式 也 多 种 多 样 。 浮 动 布 局 可 以 设计 成 宽度 固定 , 左 、 右 两 列 都 浮动 ,也 
可 以 使 用 百分比 形式 定义 列 自 适应 宽度 。 层 布局 可 以 采用 绝对 定位 ,把 左 、 右 列 固定 在 左 
右 两 边 。 

三 列 式 网 页 布局 也 是 一 种 较 常 用 的 网 页 整体 布局 方式 ,使 网 站 内 容 显 得 非常 丰富 ,能 
充分 利用 网 页 空间 。 三 列 式 布局 相对 复杂 ,可 以 使 用 嵌 套 浮动 .并列 浮动 .并 列 层 等 多 方 
式 实现 ,宽度 可 以 定义 为 固定 值 或 自 适应 宽度 。 

多 列 式 网 页 布局 结构 较 复杂 ,其 实现 方法 也 是 多 种 多 样 ,可 以 采用 嵌 套 结构 并列 浮 
动 结构 和 列表 结构 ,其 实现 方法 与 两 列 式 网 页 布局 和 三 列 式 网 页 布局 类 似 。 


【知识 尾 备 】 


1. CSS 定位 属性 


CSS 定位 (Positioning) 属 性 允许 对 元 素 进 行 定位 ,CSS 为 定位 和 浮动 提供 了 一 些 属 
性 ,利用 这 些 属性 ,可 以 建立 多 列 式 布局 ,也 可 以 将 布局 的 一 部 分 与 另 一 部 分 重大 。 

div、hl 或 p 元 素 常常 被 称 为 块 级 元 素 。 这 意味 着 这 些 元 素 显 示 为 一 块 内 容 , 即 * 块 
框 ?。 与 之 相反 ,span 和 strong 等 元 素 称 为 “行内 元 素 ”, 这 是 因为 它们 的 内 容 显 示 在 行 
中 , 即 “ 行 内 框 ”。 

可 以 使 用 display 属性 改变 生成 的 框 的 类 型 。 这 意味 着 ,通过 将 display 属性 设置 为 
block ,可 以 让 行内 元 素 ( 例 如 二 a> 元 素 ) 表 现 得 像 块 级 元 素 一 样 。 还 可 以 通过 把 display 
设置 为 none, 让 生成 的 元 素 根本 没有 框 。 这 样 该 框 及 其 所 有 内 容 就 不 再 显示 ,不 占用 文 
档 中 的 空间 。 但 是 在 一 种 情况 下 ,即使 没有 进行 显 式 定义 ,也 会 创建 块 级 元 素 。 这 种 情况 
发 生 在 把 一 些 文本 添加 到 一 个 块 级 元 素 ( 例 如 div) 的 开头 。 即 使 没有 把 这 些 文本 定义 为 
段落 , 它 也 会 被 当 作 段 落 对 待 ,示例 代码 如 下 : 


单元 10 网 页 中 元 素 与 整体 布局 的 应 用 设计 





<div> 

some text 

<p> Some more text.< /p> 
</div> 


在 这 种 情况 下 ,这 个 框 称 为 无 名 块 框 ,因为 它 不 与 专门 定义 的 元 素 相关 联 。 

块 级 元 素 的 文本 行 也 会 发 生 类 似 的 情况 。 假 设 有 一 个 包含 三 行文 本 的 段落 。 每 行文 
本 形成 一 个 无 名 框 。 无 法 直接 对 无 名 块 或 行 框 应 用 样式 ,因为 没有 可 以 应 用 样式 的 地 方 
(注意 , 行 框 和 行内 框 是 两 个 概念 ) 。 但 是 ,这 有 助 于 理解 在 屏幕 上 看 到 的 所 有 东西 都 形成 
某 种 框 。 

1) CSS 定位 机 制 

CSS 有 三 种 基本 的 定位 机 制 : 普通 流 、 浮 动 和 绝对 定位 。 除 非 专门 指定 ,否则 所 有 
框 都 在 普通 流 中 定位 。 也 就 是 说 ,普通 流 中 的 元 素 的 位 置 由 元 素 在 HTML 中 的 位 置 
决定 。 

块 级 框 从 上 到 下 一 个 接 一 个 地 排列 , 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计算 出 
来 。 行 内 框 在 一 行 中 水 平 布置 。 可 以 使 用 水 平 内 边 距 ,边框 和 外 边 距 调整 它们 的 间距 。 
但 是 ,垂直 内 边 距 ,边框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 行 框 
(Line Box) , 行 框 的 高 度 总 是 足以 容纳 它 包含 的 所 有 行内 框 。 不 过 ,设置 行 高 可 以 增加 这 
个 框 的 高 度 。 

2) CSS position 属性 

通过 使 用 position 属性 ,我 们 可 以 选择 四 种 不 同类 型 的 定位 ,这 会 影响 元 素 框 生成 的 
方式 。position 属性 值 的 含义 如 表 10-1 所 示 。 

表 10-1 position 属性 值 的 含义 


position 属性 值 使 用 说 明 

元 素 框 正常 生成 。 块 级 元 素 生成 一 个 矩形 框 ,作为 文档 流 的 一 部 分 ,行内 元 素 则 
会 创建 一 个 或 多 个 行 框 , 置 于 其 父 元 素 中 

relative 元 素 框 偏 移 某 个 距离 。 元 素 仍 保持 其 未 定位 前 的 形状 , 它 原本 所 占 的 空间 仍 保留 
元 素 框 从 文档 流 完 全 删除 ,并 相对 于 其 包含 块 定 位 。 包 含 块 可 能 是 文档 中 的 另 一 


个 元 素 或 者 是 初始 包含 块 。 元 素 原先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ,就 好 像 
元 素 原来 不 存在 一 样 。 元 素 定 位 后 生成 一 个 块 级 框 ,而 不 论 原来 它 在 正常 流 中 生 





static 








absolute 








成 何 种 类 型 的 框 
fixed 元 素 框 的 表现 类 似 于 将 position 设置 为 absolute, 不 过 其 包含 块 是 视窗 本 身 
3) CSS 相对 定位 


设置 为 相对 定位 的 元 素 框 会 偏 移 某 个 距离 。 元 素 仍然 保持 其 未 定位 前 的 形状 , 它 原 
本 所 占 的 空间 仍 保留 。 相 对 定位 实际 上 被 看 作 普 通 流 定 位 模型 的 一 部 分 ,因为 元 素 的 位 
置 相对 于 它 在 普通 流 中 的 位 置 。 
相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 , 它 将 出 现在 
它 所 在 的 位 置 上 。 然 后 ,可 以 通过 设置 垂直 或 水 平 位 置 ,让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进 
行 移动 。 
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如 果 将 top 设置 为 20px, 那 么 框 将 在 原 位 置顶 部 下 面 20px 的 地 方 。 如 果 left 设置 为 
30px, 那 么 会 在 元 素 左边 创建 30px 的 空间 ,也 就 是 将 元 素 向 右 移动 ,示例 代码 如 下 : 


#box relative { 
position: relative; 
left: 30px; 
top: 20px; 

} 


相对 定位 示意 图 如 图 10-1 所 示 。 





图 10-1 相对 定位 示意 图 


注意 : 在 使 用 相对 定位 时 ,无 论 是 否 进行 移动 ,元素 仍然 占据 原来 的 空间 。 因 此 , 移 
动 元 素 会 导致 它 履 盖 其 他 框 。 

4) CSS 绝对 定位 

设置 为 绝对 定位 的 元 素 框 从 文档 流 完 全 删除 ,并 相对 于 其 包含 块 定位 ,包含 块 可 能 是 
文档 中 的 另 一 个 元 素 或 者 是 初始 包含 块 。 元 素 原 先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ， 
就 好 像 该 元 素 原来 不 存在 一 样 。 元 素 定位 后 生成 一 个 块 级 框 ,而 不 论 原来 它 在 正常 流 中 
生成 何 种 类 型 的 框 。 

绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 , 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 同 , 相 
对 定位 实际 上 被 看 作 普通 流 定位 模型 的 一 部 分 ,因为 元 素 的 位 置 相 对 于 它 在 普通 流 中 的 
位 置 。 普 通 流 中 其 他 元 素 的 布局 就 像 绝对 定位 的 元 素 不 存在 一 样 ,示例 代码 如 下 : 


#box relative { 
position: absolute; 
left: 30px; 
top: 20px; 
} 
绝对 定位 示意 图 如 图 10-2 所 示 。 
绝对 定位 的 元 素 的 位 置 相对 于 最 近 的 已 定位 父 元 素 , 如 果 元 素 没 有 已 定位 的 父 元 素 ， 
那么 它 的 位 置 相 对 于 最 初 的 包含 块 。 相 对 定位 是 “相对 于 "元素 在 文档 中 的 初始 位 置 ,而 
绝对 定位 是 “相对 于 ”最 近 的 已 定位 父 元 素 ,如 果 不 存在 已 定位 的 父 元 素 ,那么 “相对 于 ”最 
初 的 包含 块 ,最 初 的 包含 块 可 能 是 画布 或 HTML 元 素 。 
提示 : 因为 绝对 定位 的 框 与 文档 流 无 关 , 所 以 它们 可 以 履 盖 页 面 上 的 其 他 元 素 。 可 
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LE 
图 10-2 绝对 定位 示意 图 


以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆放 次 序 。 

5) CSS 浮动 

浮动 的 框 可 以 向 左 或 向 右 移动 ,直到 它 的 外 边缘 磁 到 包含 框 或 男 一 个 浮动 框 的 边框 
为 止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ,所 以 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 
不 存在 一 样 。 如 图 10-3 所 示 , 当 把 框 1 向 右 浮 动 时 , 它 脱离 文档 流 并 且 向 右 移动 ,直到 它 
的 右边 缘 碰 到 包含 框 的 右边 缘 。 


不 浮动 的 框 1 向 右 浮动 
Tr 二 一] | 
| | 1 | 1 
| 1 1 虽 || 
iL 要 | 1 L_ 模 ?| | _ 框 11 | 
| | | | | 一 | 
| 本 | | 
1 人 _ 框 2| | 1| _ 框 31 | 
| IE | 1 一 一 | 
ll i | 
1 1 1 | 
i _ 杠 31 1 | | 


10-3” 右 浮动 示意 图 


如 图 10-4 所 示 , 当 框 1 向 左 浮动 时 , 它 脱离 文档 流 并 且 向 左 移动 ,直到 它 的 左边 缘 碰 
到 包含 框 的 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ,所 以 它 不 占据 空间 ,实际 上 覆盖 住 了 框 
2, 使 框 2 从 视图 中 消失 。 如 果 把 所 有 3 个 框 都 向 左 移动 ,那么 框 1 向 左 浮动 直到 碰 到 包 
含 框 ,另外 两 个 框 向 左 浮动 直到 碰 到 前 一 个 浮动 框 。 


框 1 向 左 浮动 所 有 3 个 框 向 左 浮动 
要 ，。 人 
| eset ci 
| _ 可 1| 1 柜 21| -看 3| 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
1 


Iw 
Cs 


图 10-4 左 浮动 示意 图 
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如 图 10-5 所 示 ,如果 包含 框 太 罕 ,无 法 容纳 水 平 排列 的 3 个 浮动 元 素 ,那么 其 他 浮动 
块 向 下 移动 ,直到 有 足够 的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 ,那么 当 它们 向 下 移动 时 可 能 
被 其 他 浮动 元 素 “ 卡 住 ”。 





框 1 向 左 浮动 所 有 3 个 框 向 左 浮动 
1r------ 了 rr------] | 1r------ 了 rr------] | 
ec | | 
| 国王 | 2 | 1 i 要 | | 
pr | 1 国 EW Eee 加 | 

< i | | 
| EE 柜 3 | 1 1 | {| | 
| 1 

| 框 3 下 降 | | 框 3 被 框 l* 卡 住 了 " | 


图 10-5 浮动 元 素 被 卡 住 的 示意 图 


在 CSS 中 使 用 float 属性 实现 元 素 的 浮动 。 

6) 行 框 和 清理 

浮动 框 旁 边 的 行 框 被 缩短 ,从 而 给 浮动 框 留 出 空间 , 行 框 围绕 浮动 框 。 因 此 ,创建 浮 
动 框 可 以 使 文本 围绕 图 像 ,如 图 10-6 所 示 。 


不 浮动 的 框 图 像 向 左 浮动 


行 框 被 缩短 ， 给 浮动 图 像 留 出 空间 


























10-6 图像 向 左 浮动 示意 图 
要 想 阻止 行 框 围绕 浮动 框 ,需要 对 该 行 框 应 用 clear 属性 。clear 属性 的 值 可 以 是 
left、right、both 或 none, 它 表示 框 的 哪些 边 不 应 该 挨 着 浮动 框 。 为 了 实现 这 种 效果 ,在 被 
清理 元 素 的 上 部 的 外 边 距 上 添加 足够 的 空间 ,使 元 素 的 顶 边缘 垂直 下 降 到 浮动 框 下 面 , 如 
图 10-7 所 示 。 
清理 第 二 个 段落 





添加 上 外 边 距 ， 为 浮动 框 留 出 空间 


图 10-7 clear 属性 应 用 示意 图 
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2. 网 页 布局 的 基本 模型 


CSS 中 有 三 种 基本 的 定位 机 制 : 流动 模型 (flow) 、 浮 动 模型 (float) 和 层 模型 (layer) 。 

1) 流动 模型 

流动 模型 是 HTML 默认 的 布局 模型 ,默认 状态 下 (position 属性 没有 定义 为 absolute 
或 fixed,float 属性 也 没有 定义 为 left 或 right) 的 HTML 网 页 元 素 都 是 根据 流动 模型 来 
布局 网 页 内 容 的 。 所 有 网 页 元 素 都 以 流动 布局 模型 作为 默认 布局 方式 ,流动 布局 模型 的 
优势 在 于 元 素 之 间 不 存在 错位 、 覆 盖 等 问题 ,布局 简单 ,符合 人 们 的 浏览 习惯 。 但 是 不 能 
只 用 单纯 的 流动 布局 模型 设计 出 更 加 艺术 化 的 网 页 页 面 效果 。 

所 谓 流动 ,是 指 网 页 元 素 随 着 网 页 文档 流 自 上 而 下 按 顺序 分 布 ,元 素 本 身 是 被 动 的 ， 
只 能 根据 元 素 排 列 的 先后 顺序 来 决定 分 布 位 置 , 要 改变 某 个 元 素 的 位 置 ,只 能 通过 改变 它 
在 HTML 文档 流 中 的 分 布 位 置 。 同 时 流动 布局 又 是 活动 的 ,也 就 是 说 它 的 位 置 随 时 发 
生 改 变 , 如 果 在 元 素 前 面 增加 另外 一 个 元 素 , 则 它 的 位 置 会 被 向 后 移动 ;如 果 删 除 上 面 的 
元 素 , 则 其 后 面 的 元 素 自动 填补 被 删除 的 空间 。 

块 状元 素 与 内 联 元 素 流 动 方式 有 所 不 同 。 块 状元 素 会 在 所 处 的 包含 元 素 内 自 上 而 
下 按 顺 序 垂直 延伸 分 布 ,默认 状态 下 , 块 状元 素 的 宽度 都 为 100% ,会 以 行 的 形式 占据 
网 页 位 置 ,不 管 该 元 素 所 包含 的 内 容 有 多 少 。 内 联 元 素 会 在 所 处 的 包含 元 素 内 从 左 至 
右 分 布 显示 ,超出 一 行 后 ,会 自动 从 上 而 下 换行 显示 ,然后 继续 从 左 至 右 按 顺序 流动 ， 
以 此 类 推 。 

当 元 素 定义 为 相对 定位 , 即 position 属性 设置 为 relative 时 ,该 元 素 也 会 遵循 流动 模 
型 的 布局 规则 ,跟随 HTML 文档 流 自 上 而 下 按 顺 序 流动 。 

2) 浮动 模型 

浮动 是 一 种 非常 先进 的 布局 方式 ,能 够 改变 页 面 中 对 象 的 前 后 流动 顺序 。 浮 动 的 框 
可 以 左右 移动 ,直到 它 的 外 边缘 碰 到 包含 框 或 另 一 个 浮动 框 的 边缘 。 

浮动 属性 float 是 CSS 布局 中 一 个 非常 重要 的 属性 ,该 属性 的 取 值 决定 了 元 素 是 否 
浮动 以 及 如 何 浮动 ,none 表示 元 素 不 浮动 ,left 表示 元 素 左 浮动 ,right 表示 元 素 右 浮动 。 

任何 网 页 元 素 默认 状况 是 不 能 够 浮动 的 ,但 都 可 以 使 用 float 属性 定义 为 浮动 , 块 状 
元 素 div.p、table 和 内 联 元 素 span、strong、img 都 可 以 被 定义 为 浮动 。 

浮动 模型 具有 以 下 几 个 特征 。 

(1) 任何 定义 为 浮动 的 元 素 都 会 自动 被 设置 为 一 个 块 状元 素 显 示 , 相 当 于 被 定义 了 
“display: block; "声明 。 这 样 对 于 浮动 的 内 联 元 素 就 可 以 定义 宽度 和 高 度 属 性 ,和 否则 内 
联 元 素 定义 宽度 和 高 度 属性 无 效 。 对 于 浮动 元 素 应 该 显 式 定义 宽度 ,如 果 浮 动 元 素 没有 
定义 宽度 时 ,浮动 元 素 会 自动 收缩 到 能 够 包含 内 容 的 宽度 。 例 如 ,如 果 浮 动 元 素 内 部 包含 
一 张 图 片 , 则 浮动 元 素 将 与 图 片 一 样 宽 ;如 果 内 部 包含 文本 , 则 浮动 元 素 将 与 最 长 的 文本 
行 一 样 宽 。 

(2) 浮动 布局 不 会 与 流动 布局 发 生 冲 突 。 当 元 素 定 义 为 浮动 布局 时 , 它 在 垂直 方向 
上 应 该 还 处 于 网 页 文档 流 中 ,也 就 是 说 浮动 元 素 不 会 脱离 正常 文档 流 而 任意 地 浮动 , 它 的 
上 边线 将 与 未 被 声明 为 浮动 时 的 位 置 相同 。 但 是 在 水 平方 向 上 , 它 的 外 边缘 会 尽 可 能 地 
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靠近 它 的 包含 元 素 边缘 。 

(3) 与 普通 元 素 一 样 ,浮动 元 素 始 终 位 于 包含 元 素 内 ,不 会 游离 于 包含 元 素 之 外 ,或 
者 破坏 元 素 的 包含 关系 ,也 不 会 覆 复 其 也 元 素 , 也 不 会 挤占 其 他 元 素 的 位 置 ,这 与 层 布局 
不 同 。 浮 动 布局 具有 流动 布局 的 部 分 特性 ,在 布局 方面 具有 更 大 的 灵活 性 。 

(4) 虽然 浮动 元 素 能 够 随 文档 流动 ,但 浮动 布局 与 流动 布局 存在 本 质 区 别 , 浮 动 元 素 
后 面 的 块 状 元 素 和 内 联 元 素 都 能 够 以 流 的 形式 环绕 浮动 元 素 左右 。 但 是 浮动 元 素 前 面 的 
文本 流 或 内 联 元 素 则 不 会 环绕 浮动 元 素 , 它 会 在 前 面 元 素 的 下 面 开 始 浮动 。 浮 动 元 素 也 
不 会 与 前 面 元 素 的 外 边 距 发 生 重 共 现象 。 

(5) 当 两 个 或 者 两 个 以 上 的 相 邻 元 素 都 被 定义 了 浮动 显示 时 ,如 果 存 在 足够 的 空间 
容纳 它们 ,浮动 元 素 之 间 可 以 并 列 显 示 。 它 们 的 上 边线 在 同一 水 平 线 上 。 如 果 没 有 足够 
的 空间 ,那么 后 面 的 浮动 元 素 将 会 下 移 到 能 够 容纳 它 的 地 方 ,这 个 向 下 移动 的 元 素 有 可 能 
会 产生 一 个 单独 的 浮动 。 

3) 层 模型 

层 模 型 技术 最 早 源 于 Netscape Navigator 4. 0 推出 并 支持 的 Layer( 层 ) 。 后 来 微软 
公司 用 div 元 素 推 出 层 的 概念 ,这 里 的 “ 层 ? 与 普通 的 div 标签 有 所 区 别 ,容易 混淆 。 
Dreamweaver CS3 为 了 区 分 “ 层 ” 与 普通 的 div 标签 ,曾经 将 * 层 ”命名 为 “AP Div”, 以 示 
区 别 。 

绝对 定位 元 素 遵循 层 布局 模型 ,网 页 元 素 的 相互 层 人 是 层 布局 的 一 个 基本 特征 ,而 在 
流动 布局 和 浮动 布局 中 是 无 法 实现 这 种 层 释 效果 的 。 在 CSS 中 可 以 通过 z-index 属性 来 
确定 定位 元 素 的 层 县 位置 ,z-index 属性 值 大 的 元 素 位 于 z-index 属性 值 小 的 元 素 之 上 。 
如 果 两 个 元 素 的 z-index 属性 值 相同 , 则 依据 它们 在 网 页 文档 的 声明 顺序 层 释 。 


3. 使 用 CSS 的 定位 属性 控制 元 素 的 位 置 


通过 设置 CSS 的 定位 属性 可 以 控制 元 素 的 定位 方式 ,定位 属性 (position) 的 选项 主 
要 有 : static( 静 态 ) ,relative( 相 对 ) absolute( 绝 对 ) fixed( 固 定 ) 。 
以 下 各 种 定位 形式 的 示例 中 的 样式 定义 代码 如 表 10-2 所 示 。 


表 10-2 各 种 定位 形式 的 示例 中 的 样式 定义 代码 








行 号 CSS 代码 
01 | body{ 
02 margin: 07 
03 } 
04 .box { 
05 width: 200px; 
06 height: 100px; 
07 background- color: #ccc; 
08 border: 2px solid # £0c; 
09 } 
1) static 


static 是 元 素 的 默认 定位 方式 ,如 果 未 显 式 声 明 元 素 的 定位 类 型 , 则 默认 值 为 static， 
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即 流动 布局 ,按照 HTML 代码 中 的 顺序 从 上 到 下 一 个 接 一 个 排列 。 块 状元 素 以 框 的 形 
状 显示 , 框 之 间 的 垂直 距离 由 框 的 上 、 下 外 边 距 计 算出 来 。 框 之 间 的 水 平 间距 可 以 使 用 内 
边 距 ,边框 和 外 边 距 设置 。 

例如 ,对 于 如 下 所 示 的 HTML 代码 ,区 块 box 在 页 面 的 布局 效果 如 图 10-8 所 示 。 


<div class= "box" style= "position:static"> 静 态 定位 区 块 < /div> 


页 面 的 左上 角 为 坐标 原点 , 即 坐 标 值 为 (0,0) ,区 块 ”原点 
box 的 宽度 为 200px, 高 度 为 100px, 采 用 静态 (static) 
定位 方式 , 即 在 普通 流 中 定位 ,由 于 将 body 标签 的 
margin 属性 设置 为 0, 所 以 区 块 box 左上 角 的 点 与 页 面 
的 原点 重合 。 

2) relative 

relative 使 元 素 相 对 于 默认 的 原始 位 置 偏 移 一 定 的 
距离 , 偏 移 的 方向 及 大 小 由 top、right、bottom 和 left 属 
性 确定 。 相 对 定位 仍然 受 文档 流 的 影响 ,不 会 脱离 正常 
的 文档 流 ,遵循 流动 布局 模型 ,相对 定位 元 素 原 来 占有 的 空间 不 变 , 所 谓 * 相 对 ”, 是 指 相对 
定位 元 素 的 位 置 是 相对 于 它 在 普通 流 中 的 原始 位 置 进行 偏 移 , 元 素 本 身 的 偏 移 对 网 页 的 
其 他 元 素 位 置 不 会 产生 影响 ,虽然 元 素 本 身 产 生 了 偏 移 ,但 是 偏 移 元 素 后面 的 其 他 元 素 在 
仍 按 普通 文档 流 的 排列 规则 , 紧 挨 着 元 素 偏 移 之 前 的 初始 位 置 ,而 不 是 挨 着 元 素 偏 移 之 后 
的 位 置 ,这 一 点 后 面 的 示例 可 以 看 出 。 因 此 ,采用 相对 定位 的 元 素 被 设置 偏 移 量 后 ,在 普 
通 文档 流 中 各 元 素 的 排列 位 置 不 会 受 偏 移 的 影响 ,元 素 的 偏 移 部 分 不 会 挤占 其 他 流动 元 
素 的 位 置 ,但 可 以 覆盖 在 其 他 元 素 之 上 进行 显示 。 

对 一 个 元 素 进 行 相对 定位 可 以 通过 设置 水 平 或 垂直 位 置 , 让 这 个 元 素 相 对 于 它 的 起 
点 进行 移动 。 如 果 将 top 设置 为 40px, 那 么 框 将 出 现在 原 位 置顶 部 下 面 40px 的 位 置 。 
如 果 将 left 设置 为 30px, 那 么 在 元 素 左边 会 留 出 30px 的 空间 ,也 就 是 将 元 素 向 右 移 动 
30px。 相 对 定位 元 素 的 偏 移 量 是 相对 于 它 在 正常 文档 流 中 的 原始 位 置 计算 的 。 

首先 分 析 以 下 的 HTML 代码 。 


<div class= "box" style= "position:relative;top:40px;left:30px;"> 相 对 定位 区 块 < /div> 


区 块 box 在 页 面 设计 视图 的 布局 效果 如 图 10-9 所 示 。 
区 块 box 采用 相对 定位 方式 ,相对 于 页 面 的 左上 
40px 角 的 原点 顶部 偏 移 40px, 左 边 偏 移 30px。 我 们 观察 
图 10-9 所 示 的 相对 定位 区 块 可 以 发 现 , 该 区 块 没有 
CSS 布局 外 框 线 , 其 原因 是 该 相对 定位 区 块 只 是 相对 
于 初始 位 置 进行 了 一 定 距离 的 偏 移 ,其 原来 占有 的 空 
间 仍 然 保 留 , CSS 布局 外 框 线 在 偏 移 前 的 位 置 , 与 
图 10-9 区 块 的 相对 定位 10-8 中 的 区 块 在 同一 个 位 置 。 偏 移 位 置 只 是 该 区 
块 的 一 个 影子 ,无 法 看 到 其 布局 外 框 线 。 


图 10-8 区 块 的 静态 定位 
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下 面 ,我 们 分 析 以 下 的 HTML 代码 。 


<div class= "box"> 静 态 定位 区 块 < /div> 

<div class= "box" style= "position:relative;top:40px;left:30px;"> 相 对 定位 区 块 < /div> 

<div class= "box"> 静 态 定位 区 块 < /div> 

在 页 面 设计 视图 的 布局 效果 如 图 10-10 所 示 , 可 以 发 现 相对 定位 区 块 相 对 于 第 
1 个 静态 定位 区 块 左 下 角 的 顶点 向 下 偏 移 了 40px， 
向 右 偏 移 了 30px。 同 时 也 可 以 发 现 第 2 个 静态 定 
位 区 块 的 位 置 与 相对 定位 区 块 偏 移 之 后 的 位 置 无 
关 , 而 紧 贴 着 相对 定位 区 块 偏 移 前 的 初始 位 置 , 相 
对 定位 区 块 偏 移 之 后 位 置 同样 看 不 到 布局 外 框 线 。 
第 2 个 静态 定位 区 块 与 第 1 个 静态 定位 区 块 的 水 平 
位 置 相同 ,垂直 位 置 相距 100px, 没 有 受 相 对 定位 区 
块 偏 移 的 影响 ,相对 定位 区 块 在 其 初始 位 置 有 一 个 
无 形 的 布局 外 框 线 ,而 偏 移 之 后 的 区 块 与 第 2 个 静 
态 定 位 区 块 有 重 全 部 分 。 相 对 定位 区 块 对 文档 流 
没有 产生 影响 ,但 自身 位 置 发 生 了 偏 移 ,可 以 覆盖 
其 他 元 素 。 

3) absolute 

absolute 使 元 素 从 HTML 的 普通 流 中 分 离 出 9 区 类 的 可 定 大 人 3 
来 ,并 置 于 一 个 完全 属于 自己 的 定位 中 ,其 原来 占有 物 洒 尖 位 加 全 
的 空间 不 再 保留 ,被 相 邻 元 素 挤占 。 通 过 top、right、 
bottom 和 left 的 设置 ,绝对 定位 的 元 素 可 以 从 它 的 父 元 素 向 上 、 右 、 下 、 左 移动 ,可 以 使 绝 
对 定位 的 元 素 放 置 到 页 面 上 的 任何 位 置 。 绝 对 定位 元 素 依然 遵循 盒 模型 的 基本 规则 ,也 
可 以 设置 外 边 距 ,边框 内 边 距 和 背景 等 属性 。 绝 对 定位 元 素 是 以 父 参照 元 素 的 内 边框 到 
绝对 定位 元 素 的 外 边框 之 间 的 最 短 垂 直 距 离 来 计算 top、right、bottom 和 left 4 个 方向 的 
值 。 如 果 这 4 个 值 都 没有 定义 , 则 上 述 属 性 会 使 用 默认 值 auto, 此 时 绝对 定位 元 素 遵循 正 
常 的 文档 流动 布局 规则 ,并 随 正常 的 文档 流 左 右 或 上 下 移动 。 要 激活 元 素 的 绝对 定位 , 必 
须 指定 top ,right\bottom 和 left 4 个 属性 中 的 至 少 一 个 值 。 一 般 只 需要 指定 这 4 个 属性 
之 中 相 邻 两 个 属性 值 即 可 实现 精确 定位 。 如 果 同 时 定位 了 3 个 或 者 4 个 属性 值 , 则 以 
left 和 top 属性 值 为 准 。 

绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 , 文 档 流 中 其 他 元 素 的 布局 当 作 绝对 定位 的 元 
素 不 存在 时 一 样 , 可 以 覆盖 页 面 上 的 其 他 元 素 。 可 以 通过 设置 z-index 属性 来 控制 这 些 框 
的 释放 顺序 。z-index 属性 的 值 越 大 , 框 的 位 置 就 越 高 。 

绝对 定位 元 素 所 包含 的 子 元 素 都 以 绝对 定位 元 素 本 身 作为 参照 物 进行 定位 ,在 其 内 
部 浮动 和 流动 ,被 包含 元 素 遵循 普通 文档 流 规则 。 绝 对 定位 元 素 的 偏 移 量 是 相对 于 其 父 
元 素 计算 的 。 

先 分 析 以 下 的 HTML 代码 。 
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<div class= "box" style= "position:absolute;top:40px;left:30px;"> 绝 对 定位 区 块 < /div> 


区 块 box 在 页 面 设计 视图 的 布局 效果 如 图 10-11 所 示 。 

区 块 box 采用 绝对 定位 方式 ,此 时 的 定位 参照 物 是 body 元 素 ,body 元 素 的 原点 在 左 
上 角 , 相 对 于 body 元 素 的 左上 角 的 坐标 原点 顶部 偏 移 40px, 左 边 偏 移 30px。 区 块 采 用 
绝对 定位 方式 ,选中 区 块 时 其 边框 外 观 也 有 所 不 同 , 该 区 块 也 变 成 了 通常 所 说 的 层 , 该 层 
在 页 面 上 表现 为 一 个 独立 的 浮动 层 。 

接着 分 析 以 下 的 HTML 代码 。 

<div class= "box"> 静 态 定位 区 块 < /div> 

<div class= "box" style= "position:absolute;top:40px;left:30px;"> 绝 对 定位 区 块 < /div> 

<div class= "box"> 静 态 定位 区 块 < /div> 

在 页 面 设计 视图 中 的 布局 效果 如 图 10-12 所 示 , 可 以 发 现 绝对 定位 区 块 相 对 于 body 
元 素 的 左上 角 的 坐标 原点 向 下 偏 移 了 40px, 向 右 偏 移 了 30px。 同 时 也 可 以 发 现 第 2 个 静 
态 定位 区 块 的 位 置 与 绝对 定位 区 块 偏 移 之 后 的 位 置 无 关 , 而 紧 贴 着 第 一 个 静态 定位 区 块 ， 
与 图 10-10 所 示 的 相对 定位 区 块 不 同 。 





图 10-11 区 块 的 绝对 定位 图 10-12 区 块 的 静态 定位 与 绝对 定位 混合 


继续 分 析 以 下 的 HTML 代码 。 


<div class= "box"> 静 态 定位 区 块 1< /div> 
<div class= "box" style= "position:relative; top:20px; left:10px;"> 
<p> 相 对 定位 区 块 < /p> 
</div> 
<div class= "box" style= "position:absolute; top:40px; left:30px;"> 
绝对 定位 区 块 
</div> 
<div class= "box"><p> 静 态 定位 区 块 2< /p>< /div> 
在 页 面 设计 视图 的 布局 效果 如 图 10-13 所 示 ,可 以 发 现 绝对 定位 区 块 相 对 于 body 元 
素 的 左上 和 角 的 坐标 原点 向 下 偏 移 了 40px, 向 右 偏 移 了 30px; 相 对 定位 区 块 相 对 于 第 一 个 
静态 定位 区 块 向 下 偏 移 了 20px', 向 右 偏 移 了 10px。 同 时 也 可 以 发 现 绝对 定位 区 块 不 会 
影响 文档 流 的 排列 顺序 和 页 面 中 其 他 元 素 的 位 置 ,相对 定位 区 块 的 偏 移 也 不 会 影响 文档 
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流 的 其 他 元 素 的 位 置 。 
4) fixed 
fixed 表示 固定 定位 ,不 会 随 着 浏览 器 窗口 的 滚 
动 条 滚动 而 变化 ,固定 定位 的 元 素 会 始终 位 于 浏览 " 
器 窗口 内 的 某 个 位 置 , 不 会 受 文档 流动 的 影响 。 


4. 浮动 清除 属性 clear 的 取 值 及 其 作用 ee ji 


如 果 不 希 望 下 一 个 元 素 环绕 浮动 对 象 ， 可 以 使 
用 clear( 清 除 ) 属 性 清除 浮动 ,clear 属性 的 取 值 包 撕 
4 个 : left\right、both、none。 


300 
下 面 应 用 表 10-3 中 的 CSS 代码 对 页 面 元 素 进行 






























布局 ,并 分 析 淫 动 清除 的 规则 。 

表 10-3 布局 页 面 元 素 与 浮动 清除 属性 的 CSS 代码 10-13 ”区 块 的 静态 定位 .相对 定位 
行 号 CSS 代码 行人 8$ 代码 与 绝对 定位 混合 
行 号 CSS 代码 行人 shRR 竹 “ 

行 号 CSS 代码 行 @s$ 供 加 
01 |#main { 17 |solid 
02 width: 710px; 18 |## 
03 height: 80px; 19 |fc0; 
04 padding: 5px; 20 
05 margin- right: auto; 21 |background 
06 margin- left: auto; | 二 
07 margin- bottom: 10px; 23 |color 
08 border: 5px solid #fcc; 24 |: 
9 | 25 |# 
10 26 |c9f; 
11 |#mainleft { 2 | 
12 width: 150px; 28 
13 height: 60px; 29 |# 
14 border: 10px solid #cf0; 30 |mainright 
15 background- color: #99f; 给 | 背 
16 |} 32 
width 
(1) “clear: lefe" 将 清除 元 素 前 面 的 左 浮动 对 象 。 如 果 当 前 元 素 前 面 存在 左 浮动 对 
象 , 则 当前 元 素 会 在 左 浮动 元 素 底下 显示 。 人 


对 于 表 10-4 所 示 HMTL 代码 ,其 浏览 效果 如 图 10-14 所 示 。 
height 


€0px; 
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表 10-4 当前 元 素 前 面 存在 左 浮动 对 象 时 ,清除 左 浮动 的 HTML 代码 





行 号 HTML 代码 
01 | <div id=- "main" style= "height:160px"> 
02 <div id= "mainleft" style= "float:left;"> 左 区 块 : 左 浮动 < /div> 
03 <div id= "maincenter" style= "float:left;clear:left"> 中 区 块 : 左 浮动 ,清除 前 面 的 左 
04 浮动 对 象 < /div> 
05 <div id= "mainright" style="float:left;"> 右 区 块 : 左 浮动 < /div> 
06 </div> 





图 10-14 ”当前 元 素 前 面 存 在 左 浮动 对 象 时 ,清除 左 浮动 的 浏览 效果 


表 10-4 中 的 HTML 代码 定义 了 3 个 div 对 象 ,并 设置 它们 全 为 左 浮动 , 当 为 区 块 
maincenter 设置 “clear: left” 属 性 后 ,由 于 其 前 面 存 在 左 浮动 对 象 ,区 块 maincenter 自动 
置 于 区 块 mainleft 的 底下 并 靠 左 显示 。 

(2)“clear: right” 将 清除 元 素 前 面 的 右 浮 动 对 象 , 如 果 当 前 元 素 前 面 存在 右 浮 动 对 
象 , 则 当前 元 素 会 在 右 浮 动 对 象 底下 显示 。 

对 于 表 10-5 所 示 HMTL 代码 ,其 浏览 效果 如 图 10-15 所 示 。 


表 10-5 ”当前 元 素 前 面 存在 左 浮动 对 象 时 ,清除 右 浮 动 的 HTML 代码 





行 号 HTML 代码 
01 | <div id= "main"> 
02 <div id=- "mainleft" style= "float:left;"> 左 区 块 : 左 浮动 </div> 
03 <div id= "maincenter" style="float:left;clear:right"> 中 区 块 : 左 浮动 .清除 前 面 的 
04 右 浮 动 对 象 < /div> 
05 <div id= "mainright" style= "float:left;"> 右 区 块 : 左 浮动 < /div> 
06 | </div> 








10-15 ”当前 元 素 前 面 存在 左 浮动 对 象 时 ,清除 右 浮动 的 浏览 效果 


表 10-5 中 的 HTML 代码 定义 了 3 个 div 对 象 ,并 设置 它们 全 为 左 浮动 。 当 为 区 块 
maincenter 设置 “clear: right” 属 性 后 ,由 于 其 前 面 不 存在 右 浮 动 对 象 ,区 块 maincenter 依 
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然 与 区 块 mainleft 并 列 显 示 。 
对 于 表 10-6 所 示 HMTL 代码 ,其 浏览 效果 如 图 10-16 所 示 。 


表 10-6 ”当前 元 素 前 面 不 存在 右 浮动 对 象 时 ,清除 右 浮动 的 HTML 代码 





行 号 HTML 代码 
01 <div id= "main"> 
02 <div id= "mainleft" style="float:left;"> 左 区 块 : 左 浮动 < /div> 
03 <div id- "maincenter" style="float:left;clear:right"> 中 区 块 : 左 浮动 清除 前 面 的 
04 右 浮 动 对 象 </div> 
05 <div id= "mainright" style="float:right;"> 右 区 块 : 右 浮动 < /div> 
06 </div> 





图 10-16 当前 元 素 前 面 不 存在 右 浮动 对 象 时 ,清除 右 浮动 的 浏览 效果 


表 10-6 中 的 HTML 代码 定义 了 3 个 div 对 象 ,并 设置 左 区 块 、 中 区 块 为 左 浮动 , 右 
区 块 为 右 浮 动 。 当 为 中 区 块 maincenter 设置 “clear: right” 属 性 后 ,由 于 其 前 面 不 存在 右 
浮动 对 象 ,区 块 maincenter 依然 与 区 块 mainleft 并 列 显示 。 而 区 块 mainright 位 于 区 块 
maincenter 的 后 面 ,不 受 此 清除 操作 的 影响 ,继续 浮动 区 块 maincenter 的 右 侧 。 

对 于 表 10-7 所 示 HMTL 代码 ,其 浏览 效果 如 图 10-17 所 示 。 


表 10-7 当前 元 素 前 面 存在 右 浮动 对 象 时 ,清除 右 浮动 的 HTML 代码 





行 号 HTML 代码 
01 <div id= "main" style= "height:160px"> 
02 <div id= "mainright" style= "float:right;"> 右 区 块 : 右 浮动 < /div> 
03 <div id="maincenter" style= "float:right;clear:right"> 中 区 块 : 右 浮动 清除 前 面 的 
04 右 浮动 对 象 < /div> 
05 <div id= "mainleft" style="float:right;"> 左 区 块 : 右 浮动 < /div> 
06 </div> 








10-17 ”当前 元 素 前 面 存 在 右 浮动 对 象 时 ,清除 右 浮动 的 浏览 效果 
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表 10-7 中 的 HTML 代码 定义 了 3 个 div 对 象 , 并 设置 它们 全 为 右 浮 动 , 当 为 中 区 块 
maincenter 设置 “clear: right” 属 性 后 ,由 于 其 前 面 存在 右 浮动 对 象 ,区 块 maincenter 自动 
置 于 区 块 mainright 的 底下 并 靠 右 显示 ,而 区 块 maincenter 后 面 的 右 浮动 区 块 mainleft 
浮动 在 区 块 maincenter 的 左 侧 。 
(3)“clear: both” 将 清除 元 素 前 面 左 浮动 对 象 和 右 浮动 对 象 ,如 果 当 前 元 素 前 面 存 
在 左 浮动 对 象 或 右 浮动 对 象 ,当前 元 素 都 会 在 浮动 对 象 底下 显示 。 
对 于 表 10-8 所 示 HMTL 代码 ,其 浏览 效果 如 图 10-18 所 示 。 
表 10-8 当前 元 素 前 面 存在 左 浮动 对 象 时 ,清除 左 、 右 浮动 的 HTML 代码 











行 号 HTML 代码 
01 <div id= "main" style= "height:160px"> 
02 <div id= "mainleft" style="float:left;"> 左 区 块 : 左 浮动 < /div> 
03 <div id= "maincenter" style="float:left;clear:both"> 中 区 块 : 左 浮动 ,清除 前 面 的 
04 左 、 右 浮动 对 象 
05 </div> 
06 <div id= "mainright" style= "float:left;"> 右 区 块 : 左 浮动 < /div> 
07 </div> 
08 








10-18 ”当前 元 素 前 面 存 在 左 浮动 对 象 时 ,清除 左 、 右 浮动 的 浏览 效果 


表 10-8 中 的 HTML 代码 定义 了 3 个 div 对 象 ,并 设置 它们 全 为 左 浮动 , 当 为 区 块 
maincenter 设置 “clear: both” 属 性 后 ,由 于 其 前 面 存在 左 浮动 对 象 ,区 块 maincenter 自动 
置 于 区 块 mainleft 的 底下 并 靠 左 显示 。 区 块 maincenter 后 面 的 左 浮动 区 块 mainright 浮 
动 在 区 块 maincenter 的 右 侧 。 

对 于 表 10-9 所 示 HTML 代码 ,其 浏览 效果 如 图 10-19 所 示 。 


表 10-9 ”当前 元 素 前 面 存 在 右 浮动 对 象 时 ,清除 左 、 右 浮动 的 HTML 代码 





行 号 HTML 代码 
01 | <div id-"main" style= "height:160px"> 
02 <div id- "mainright" style= "float:right;"> 右 区 块 : 右 浮动 < /div> 
03 <div id= "maincenter" style="float:right;clear:both"> 中 区 块 : 右 浮动 清除 前 面 的 
04 左 、 右 浮动 对 象 
05 </div> 
06 <div id="mainleft" style="float:right;"> 左 区 块 : 右 浮动 < /div> 


07 </div> 
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EVE CE EN 





图 10-19 ”当前 元 素 前 面 存在 右 浮 动 对 象 时 ,清除 左 、 右 浮动 的 浏览 效果 


表 10-9 中 的 HTML 代码 定义 了 3 个 div 对 象 ,并 设置 它们 全 为 右 浮 动 , 当 为 区 块 
maincenter 设置 “clear: both” 属 性 后 ,由 于 其 前 面 存在 右 浮动 对 象 ,区 块 maincenter 自动 
置 于 区 块 mainright 的 底下 并 靠 右 显示 ,而 区 块 maincenter 后 面 的 右 浮 动 区 块 mainleft 
浮动 在 区 块 maincenter 的 左 侧 。 

(4)“clear: none” 允 许 当前 元 素 前 面 存在 左 浮动 对 象 或 右 浮 动 对 象 ,当前 元 素 不 会 
换行 显示 ,这 也 是 clear 属性 的 默认 值 。 

浮动 清除 只 能 适用 浮动 对 象 之 间 的 清除 ,我 们 不 能 为 非 浮 动 对 象 定 义 清除 属性 ,为 非 
浮动 对 象 定义 清除 属性 是 无 效 的 。 当 一 个 浮动 元 素 定 义 了 clear 属性 时 , 它 对 前 面 的 浮动 
对 象 不 会 产生 影响 ,也 不 会 把 已 经 存在 的 浮动 对 象 清除 。 不 会 改变 其 他 对 象 的 位 置 , 只 会 
影响 自己 的 布局 位 置 。 浮 动 清除 不 仅 针 对 相 邻 浮动 元 素 对 象 , 只 要 在 布局 页 面 里 水 平 接 
和 触 都 会 实现 清除 操作 。 


【引导 训练 】 
任务 10-1 体验 网 页 的 不 同 布局 方式 


【任务 冀 述 】 


1. 创建 网 页 100101. html 
在 网 页 100101. html 中 输入 以 下 HTML 标签 及 文字 。 


<div class= "content"> 
<div class= "top"> top< /div> 
<div class= "main">main< /div> 
<div class= "bottom">bottom< /div> 
</div> 


针对 上 述 HTML 代码 定义 相应 的 CSS 代码 实现 网 页 整体 的 上 中、 下 的 布局 方式 。 


276 


单元 10 网 页 中 元 素 与 整体 布局 的 应 用 设计 





2. 创建 网 页 100102. html 


在 网 页 100102. html 中 输入 以 下 HTML 标签 及 文字 。 


<div class= "content"> 
<div class= "left"> left< /div> 
<div class= "main" >main< /div> 
<div class= "right"> right< /div> 
</div> 


针对 上 述 HTML 代码 定义 相应 的 CSS 代码 实现 网 页 整体 的 左 、 中 、 右 的 布局 方式 。 
3. 创建 网 页 100103. html 


在 网 页 100103. html 中 输入 以 下 HTML 标签 及 文字 。 


<div class= "content"> 
<div class="left"> left< /div> 
<div class= "right"> right< /div> 
<div class= "main" >main< /div> 
<div class="clear">< /div> 
</div> 


针对 上 述 HTML 代码 定义 相应 的 CSS 代码 来 实现 网 页 整体 的 左 、 中 、 右 的 布局 


方式 。 
【任务 实施 】 


1. 创建 所 需 的 文件 夹 
在 文件 夹 *HTML5 十 CSS3 网 页 设计 实例 ”中 创建 子 文件 夹 Unit10, 然 后 在 该 文件 夹 


中 创建 子 文件 夹 1001。 


2. 启动 Dreamweaver CC 

使 用 Windows 的 [开始 了 沫 单 或 桌面 的 快捷 方式 启动 Dreamweaver CC。 

3. 创建 本 地 站 点 和 网 页 

创建 1 个 名 称 为 “单元 10” 的 本 地 站 点 ,站 点 文件 夹 为 Unit10。 在 该 站 点 的 文件 夹 


1001 中 创建 网 页 100101. html。 


4. 输入 HTML 标签 与 文字 内 容 
在 网 页 100101. html 中 插入 上 、 中 、 下 布局 方式 所 需 的 标签 和 输入 所 需 的 文字 内 容 。 
5. 定义 CSS 代码 来 实现 网 页 100101. html 整体 的 上 、 中 、 下 的 布局 方式 


实现 网 页 100101. html 整体 的 上 .中 、 下 布局 方式 的 CSS 代码 如 表 10-10 所 示 。 
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表 10-10 实现 网 页 100101. html 整体 的 上 、 中 、 下 布局 方式 的 CSS 代码 定义 
序号 CSS 代码 序号 CSS 代码 
01 .content { 16 -main { 
02 margin: 10px auto7 17 width: 150px; 
03 width: 160px; 18 height: 80px; 
04 height: 100% 19 line- height: 80px; 
05 text—align: center; 20 border: 2px solid #000; 
06 |} 21 margin: 2px auto 2px; 
07 22 |} 
08 | .top { 23 
09 width: 150px; 24 | .bottom { 
10 height: 40px; ”5 width: 150px; 
11 line- height: 40px; 26 height: 60px; 
了 2 border: 2px solid # 0007 27 line- height: 60px; 
3 pagdding: Opx; 28 border: 2px solid #000; 
14 margin: 10px auto 2px; 29 margin: 2px auto Spx; 
5 |} 30 |} 














content 类 选择 符 的 左 、 右 外 边 距 值 设置 为 auto,auto 是 让 浏览 器 自动 判断 外 边 距 
值 ,浏览 器 会 呈现 为 居中 状态 。 


6. 浏览 网 页 100101. html 


浏览 网 页 100101. html 的 效果 如 图 10-20 所 示 。 


图 10-20 ”网 页 100101. html 的 浏览 效果 
然后 不 断 改 变 网 页 100101. html 各 个 类 选择 符 的 属性 设置 ,重新 浏览 其 效果 。 
7. 在 站 点 “单元 10” 的 文件 夹 1001 中 创建 网 页 100102. html 


在 网 页 100102. html 中 插入 实现 左 \ 中 、 右 布局 方式 所 需 的 标签 和 输入 所 需 的 文字 
内 容 。 


8. 定义 CSS 代码 实现 网 页 100102. html 整体 的 左 、 中 、 右 的 布局 方式 
实现 网 页 100102. html 整体 的 左 、 中 、 右 布局 方式 的 CSS 代码 如 表 10-11 所 示 。 
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表 10-11 实现 网 页 100102. html 整体 的 左 、 中 、 右 布局 方式 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 -Content { FR -main { 
02 margin: 10px auto; 18 float: left; 
03 border: 2px solid #000; 19 WwWidth: 180px; 
04 width: 334px; 20 height: 100px; 
05 height: 112px; Ea line- height: 100px; 
06 text-align: center; 22 border: 2px solid #000; 
07 |} 23 margin: 5px 2px; 
08 24 |} 
09 | .left { 25 | .right { 
10 float: left; 26 float: left; 
11 width: 50px; 27 width: 80px; 
这 height: 100px; 28 height: 100px; 
13 line- height: 100px; 29 line- height: 100px; 
14 border: 2px solid #000; 30 border: 2px solid #000; 
15 margin: 5px 2px; 31 margin: 5px 2px; 
16 |} 32 |} 














区 块 left 为 左 浮动 ( 即 “float: left”) ,总 宽度 如 下 。 
总 宽度 三 外 边 距 宽度 十 内 容 宽度 十 边框 宽度 十 内 边 距 宽度 
一 4px 十 50px 十 4px 一 58px 

区 块 main 为 左 浮动 ( 即 “float: left”) ,其 总 宽度 为 188px。 

区 块 right 为 左 浮动 ( 即 “float: left”) ,其 总 宽度 为 88px。 

区 块 left、 区 块 main、 区 块 right 的 宽度 之 和 三 58px 十 188px 十 88px 王 334px, 正 好 等 
于 类 选择 符 content 所 设置 的 宽度 。 

由 于 区 块 left 的 margin-right 为 2px, 区 块 main 的 margin-left 和 margin-right 均 为 
2px, 区 块 right 的 margin-left 为 2px, 所 以 区 块 left 与 区 块 main 之 间 的 空隙 为 4px, 区 块 
main 与 区 块 right 之 间 的 空隙 为 4px。 





9. 浏览 网 页 100102. html 


浏览 网 页 100102. html 的 效果 如 图 10-21 所 示 。 


left right 


图 10-21 网 页 100102. html 的 浏览 效果 
然后 不 断 改 变 网 页 100102. html 各 个 类 选择 符 的 属性 设置 ,重新 浏览 其 效果 。 
10. 在 站 点 “单元 10” 的 文件 夹 1001 中 创建 网 页 100103. html 


在 网 页 100103. html 中 插入 实现 左 、 中 、 右 布局 方式 所 需 的 标签 和 输入 所 需 的 文字 
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内 容 。 
11. 定义 CSS 代码 实现 网 页 100103. html 整体 的 左 、 中 、 右 的 布局 方式 


实现 网 页 100103. html 整体 的 左 、 中 、 右 布局 方式 的 CSS 代码 如 表 10-12 所 示 。 
表 10-12 实现 网 页 100103. html 整体 的 左 \、 中 、 右 布局 方式 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 .content { 18 float: right; 
02 margin: 10px auto; 19 width: 80px; 
03 border: 2px solid #000; 20 height: 100px; 
04 width: 334px; 21 border: 2px solid #000; 
05 height: auto; 22 margin: 5px 2px; 
06 text-align: center; 23 |} 
07 |} 24 
08 25 | .main { 
89. |sleft { 26 width: 180px; 
10 float: left; 2 height: 100px; 
11 width: 50px; 28 border: 2px solid #000; 
12 height: 100px; 29 margin: 5px 2px Spx 60px; 
13 border: 2px solid #000; 30 |} 
14 margin: 5px 2px; MM cleart 
15. |} 32 clear:left; 
16 33 height:1px; 
17 | .right { 34 |} 














区 块 left 为 左 浮动 ( 即 *float: left”) ,其 总 宽度 为 4px 十 50px 十 4px, 即 58px。 

区 块 right 为 右 浮 动 ( 即 “float: right”) ,其 总 宽度 为 88px。 

区 块 main 为 没有 设置 浮动 属性 ,其 margin-left 设置 为 60px, 所 以 区 块 left 与 区 块 
main 之 间 的 空隙 为 4px。 

设置 clear 类 选择 符 的 作用 是 当 父 层 的 高 度 设置 为 auto 或 100%% 时 ,使 父 层 根据 嵌 套 
div 内 容 的 高 度 自 适应 。clear 类 选择 符 的 CSS 定义 的 含义 分 别 为 清除 左 浮动 .设置 高 度 
为 1 像素 ,并 使 用 属性 裁 切 掉 多 余 的 高 度 (1px) 。 


12. 保存 与 浏览 网 页 100103. html 


保存 网 页 100103. html, 其 浏览 效果 如 图 10-22 所 示 。 


left right 


图 10-22 网 页 100103. html 的 浏览 效果 


然后 不 断 改变 网 页 100103. html 各 个 类 选择 符 的 属性 设置 ,重新 浏览 其 效果 。 
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任务 10-2 创建 浮动 定位 2 列 式 布局 的 网 页 


【任务 描 太 】 


(1) 创建 样式 文件 base. css、layout. css 和 main. css, 在 样式 文件 中 定义 标签 的 属性 、 
类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 1002. html, 且 链 接 外 部 样式 文件 base. css、 layout. css 和 
main. css。 

(3) 在 网 页 1002. html 中 添加 必要 的 HTML 标签 来 实现 网 页 主体 布局 结构 。 

(4) 在 网 页 1002. html 中 添加 图 片 标 题 文本 内 容 以 及 相应 的 HTML 标签 。 

(5) 浏览 网 页 1002. html 的 效果 ,如 图 10-23 所 示 ,该 网 页 整体 上 为 左 \ 右 布局 结构 ， 
其 中 左 侧 为 图 文 混 排 布局 , 右 侧 分 为 上 、 下 两 个 组 成 部 分 。 





阿坝 动态 m3> 行业 新 闻 RG> 


县 雾气 复 ， 冰 湖 逆 结 达 古 冰山 去 年 游客 增长 45.34% 今年 四 大 举 招 促 发 展 


水 ， 殿 九 守 的 精 届 ， 末 计 的 人 们 为 之 全 心动 情 、 巡 注 本 多 凑 ， 季 近日 以 请 于 芭 洁 冰山 、 共 鲁 多 彩 守 水 "为 主题 的 2015 年 机 过 古 冰山 果 区 刻 六 洁 销 喜 信 


傅 源 益 ,湖水 拓 年 区 区 宣 庆 ,明丽 见 庄 。 稚 日 的 一 放 下 从 上 空 。。 局 议会 在 所 都 举 行 , 达 古 Xk 山 管理 局 时 水 有 名 游 局 竺 单位 相关 欠 责 人 和 求 自首 内 字 灾 让 行 


E 几 下 ， 屿 时 下面， 件 硅 匠 测 彩 ， 入 权重 王 …。 [应 情 ) 社 兵 雪人 、 新 池 强 休 j 者 一 起 ， 回顾 了 20…… [详情 ] 


拱 程 旅游 年 交易 额 破 百 亿 元 ” 增 速 达 509% 





记者 近日 从 将 和 纪行 网 攻克 ，2014 年 本 避 的 在 线 麻 全 相关 产品 交易 略 招 过 100 亿 元 


I i 
有 蛋 称 。 融 九 半天 ， 闵 牺 形 当 布 委 共 与 水 关 江 脆 Sr 本 ba 
re 是 区 二 名 的 2 倍 [/ 上 ， 现 长 天 认 殷 证 50%。 在 各 拷 洲 、 旧 由 行 、 出 境 小 ， 国 小 、 甬 斩 等 





二 本 深 ,保洁 行 W 茵 一 。 以 出 顽 浅 … [二 全 











图 10-23 网 页 1002. html 的 浏览 效果 


【任务 衬 施 】 


1. 创建 文件 夹 
在 文件 夹 Unit10 中 创建 子 文件 夹 1002, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 


2. 定义 网 页 的 CSS 代码 
在 文件 夹 css 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 10-13 所 示 。 
表 10-13 ”网 页 1002. html 中 样式 文件 base. css 的 CSS 代码 定义 





这 号 CSS 代码 
01 xx, * :after, * :before { 
02 margin: 0; 
03 padding: 0; 
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续 表 

序号 CSS 代码 

04 box- sizing: border-box7 

05 | 

06 body { 

07 Color: #666; 

08 font- size: 12px; 

09 letter- spacing: Opx; 

10 white- space: normal; 

11 font- family: Tahoma， Geneva, sans- serif, "宋体 "; 

这 } 

13 ullif{ 

14 list- style- type: none; 

15 list- style- position: outside; 

16 text- indent: 0; 

17 . 

18 | img{ 

19 border: none; 

20 } 

we 

22 ai 

23 text- decoration: none; 

24 } 

25 

2 a:link, 

2 a:visited { 

28 text- decoration: none; 

29 Color: #666; 

30 } 

31 

32 a:hover { 

33 Color: #2b98db; 

34 } 





在 文件 夹 css 中 创建 样式 文件 layout. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 主体 
布局 结构 的 CSS 代码 定义 如 表 10-14 所 示 。 


表 10-14 样式 文件 layout. css 中 网 页 主体 布局 结构 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 | section { 09 padding: 10px 0; 
02 width: 1202px; 10 |} 
03 position: relative; 11 “0010-9-24 
04 margin- top: 10px; 12 float: left; 
05 display: block; 13 display: inline; 
06 margin: auto; 14 border- width: 0; 
07 |} 15 min- height: 50px; 
08 -eC-Dews .ec-g { 16 position: relative; 
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续 表 

序号 CSS 代码 序号 CSS 代码 

by 省 生 26 .ec-g- last { 

18 -ec-g-11{ a float: right; 

19 width: 610px7 2 | 主 

20 |} 29 

21 30 | .w-box{ 

22 |e-24 31 position: relative; 

23 width: 570px; 32 margin- top: 10px; 

24 |} 3 | 

25 34 














在 文件 夹 css 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,CSS 代码 定 
义 如 表 10-15 所 示 。 


表 10-15 样式 文件 main. css 中 的 CSS 代码 定义 





序号 CSS 代码 
001 Ww-box >h2 { 

002 -Imoz-border- radius: 0; 

003 -webkit-border- radius: 0; 
004 border- radius: 0; 

005 border-width: 0; 

006 border- style: solid; 

007 border- color: #FFF; 

008 background- color: #2b98db; 
009 } 

010 

011 .W-box >h2, .w-box >h2af{ 
012 line- height: 35px; 

013 height: 35px; 

014 font- size: 12px; 

015 position: relative; 

016 z-index: 27 

017 font- size: 16px; 

018 font- family: "Microsoft YaHei"7 
019 font- weight: bold; 

020 

021 

022 .W- box >h2 a, .w- box >h2 a:link, 
023 .WwW-box >h2 a:visited { 

024 Color: #666; 

025 padding: 0 15px; 

026 display: inline- block; 

027 x display: inline; 

028 Zoom: 1; 

029 vertical- align: top; 

030 } 
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续 表 
序号 CSS 代码 
031 
032 .W-box .w-m{ 
033 position: relative; 
034 z-index: 1; 
035 padding: 5px7 
036 一 Webkit-border- radius: 0; 
037 border- radius: 0; 
038 } 
039 
040 -WwW-box a.more { 
041 position: absolute; 
042 top: 8px; 
043 right: 5px; 
044 2- index: 10; 
045 padding- right: 5px7 
046 line- height: 18px; 
047 display: block; 
048 } 
049 
050 .W-box >h2 a:link, .w-box >h2 a:visited, 
051 .W-box > .more:l1ink, .w- box > .more:visited { 
052 Color: #FFF; 
053 } 
054 
055 .W-box >h2 a:hover, 
056 .W-box > .more:hover { 
057 Color: #FF6; 
058 text- decoration: none; 
059 } 
060 
061 .W-box- styleAYellow >h2a, { 
062 border- bottom: 4px solid #F60; 
063 } 
064 
065 .Ww-boxYellow >h2 { 
066 background- color: #F60; 
067 } 
068 
069 list 1i{ 
070 padding- left: lem; 
071 position: relative; 
072 Vertical-align: bottom; 
073 overflow: hidden; 
074 x* background- image: Url (images/list-p.png); 
075 * background- position: 6px center; 
076 * background- repeat: no- repeat; 
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续 表 
序号 CSS 代码 
077 font- size: 14px; 
078 line- height: 30px; 
079 } 
080 
081 .list li.info { 
082 padding- left: 0; 
083 padding- bottom: 10px; 
084 border- bottom: lpx dashed #e6e6e67 
085 margin- bottom: Spx; 
086 } 
087 .Jist li:first- child, 
088 .list li.first { 
089 border- top: 07 
090 } 
091 
092 .boxNewsList .list li.info { 
093 min- height: 104px; 
094 } 
095 
096 .list li.info .titlef 
097 margin: 5px 5px 07 
098 display: block; 
099 text- align: center; 
100 font- weight: bold; 
101 font- size: 16px; 
102 } 
103 
104 .list li.infop { 
105 text- align: left; 
106 text- indent: 2em; 
107 line- height: 162%; 
108 } 
109 
110 .list 1i.info .detail:link, 
111 .list li.info .detail:visited { 
让 2 Color: #2b98db; 
113 display: inline- block; 
114 * display: inline; 
115 Zoom: 1; 
116 white- space: nowrap; 
了 7 text- indent: 07 
118 margin- left: .5em; 
119 } 
120 
121 "list~pic 1i{ 
122 overflow: hidden; 
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续 表 
序号 CSS 代码 
123 Position: relative; 
124 text- align: left; 
125 float: none; 
126 width: 100%; 
127 border- bottom: lpx solid #EEE; 
128 padding: 10px 0 10px; 
129 font- size: 14px; 
130 } 
131 
132 | .list-pic li img { 
133 float: left; 
134 width: 180px; 
135 height: 120px; 
136 margin- right: 20px; 
137 } 
138 
139 .list-pic lii.title { 
140 font- size: 16px; 
141 font- weight: bold; 
142 display: line-block; 
143 x* display: inline; 
144 zoom: 1; 
145 text- indent: 0; 
146 font- style: normal; 
147 Color: #6257C3; 
148 } 
149 
150 .list-piclipt{ 
151 padding- top: 0.5em; 
152 text- indent: 0; 
153 } 
154 
155 .list-pic li .info { 
156 Color: #999; 
157 } 
158 
159 .list-pic li .detail:link, 
160 .ist-pic li .detail:visited { 
161 color: #2b98db; 
162 display: inline- block; 
163 x# display: inline; 
164 Zoom: 17 
165 white- space: nowrap; 
166 text- indent: 0; 
167 margin- left: .5em; 
168 } 
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续 表 
序号 CSS 代码 
169 
170 .list-pic li .detail:hover { 
171 Color: #FCO; 





3. 创建 网 页 文档 1002. html 与 链接 外 部 样式 表 


在 文件 夹 1002 中 创建 网 页 1002. html, 切 换 到 网 页 文档 1002. html 的 [代码] 视图 ， 
在 标签 “二 /head> ”的 前 面 输入 链接 外 部 样式 表 的 代码 如 下 : 


<link rel= "stylesheet" type= "text/css" href= "css/base.css"> 
<link rel="stylesheet" type= "text/css" href="css/layout.css"> 


<link rel="stylesheet" type= "text/css" href= "css/main.css"> 


4. 编写 网 页 主体 布局 结构 的 HTML 代码 
网 页 1002. html 主体 布局 结构 的 HTML 代码 如 表 10-16 所 示 。 
表 10-16 网 页 1002. html 主体 布局 结构 的 HTML 代码 





序号 HTML 代码 
01 <section class= "ec- news"> 
02 <div class="ec-g"> 
03 <!-- 主 内 容 --> 
04 <div class="ec-g-1"> 
05 
06 <div class= "Ww- box boxNewsList"> 
07 <h2><a href=""> 阿 坝 动态 < /a>< /h2> 
08 <!-- 阿 坝 动态 --> 
09 </div> 
10 </div> 
对 <div class="ec-g-2 ec-g-last"> 
4 <div class="Ww- box boxNewsList"> 
过 <h2><a href=""> 行 业 新 闻 < /a>< /h2> 
14 < 上 -行业 新 闻 --> 
15 </div> 
16 <div class= "Ww- box Ww- boxYellow boxNewsList"> 
0 <h2 class= "tabs"><i class= "tl"> gnbsp;</i><a href=""> 行 业 动 态 
18 </a></h2> 
19 <!-- 行 业 动 态 --> 
20 </div> 
21 </div> 
E234 </div> 
23 </section> 
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5. 在 网 页 中 添加 图 片 、 标 题 文本 内 容 以 及 相应 的 HTML 标签 


在 网 页 1002. html 中 添加 图 片 、 标 题 \ 文 本 内 容 以 及 相应 的 HTML 标签 ,对 应 的 
HTML 代码 如 表 10-17 所 示 。 


表 10-17 网 页 1002. html 完整 的 HTML 代码 








序号 HTML 代码 
01 <section class= "ec- news"> 
02 <div class="ec-g"> 
03 <!-- 主 内 容 --> 
04 <div class="ec-g-1"> 
05 <!-- 阿 坝 动态 --> 
06 <div class= "Ww- box boxNewsList"> 
07 <h2><a href=""> 阿 坝 动态 < /a>< /h2> 
08 <a class= "more" href=""> 更 多 ggt;</a> 
09 <ul class="w-m list-pic"> 
10 <1li><atitle=" 晨 雾 氨 氨 , 冰 湖 凝 结 " href="" target="">< img src= 
11 "images/t02.png"> 
12 <i class= "title"> 晨 雾 氨 氨 , 冰 湖 凝结 < /i>< /a> 
13 <pP> 水 ,是 九寨 的 精灵 ,来 过 的 人 们 为 之 倾心 动情 。 她 清 透 多 姿 ,柔情 满洲 , 湖 
14 水 终年 碧蓝 澄 澈 ,明丽 见 底 。 冬 日 的 一 道 暖 阳 从 上 空 斜 下 ,映射 在 湖面 , 伴 
15 随 着 湖 影 ,微微 荡漾 …… <a class="detail" title=" 展 雾 握 氟 , 冰 湖 凝结 " 
16 href=""> [详情 ]< /a>< /p> 
17 </li> 
18 <li><atitle- "九寨 沟 冬 景 一 绝 珍珠 滩 瀑 布 飞 珠 溅 玉 " href="" target=""> 
19 < img src= "images/t04.jpg"> 
20 <i class="title"> 九 寨 沟 冬 景 一 绝 珍珠 滩 瀑 布 飞 珠 溅 玉 < /i>< /a> 
21 <p> 珍 珠 滩 瀑 布 位 于 日 则 沟 内 镜 海 之 上 , 金 铃 海 之 下 ,号 称 九寨 第 一 景 。 珍 珠 
22 滩 瀑 布 和 珍珠 滩 相 连 , 瀑 面 呈 新 月 形 , 宽 阔 的 水 帘 似 拉 开 的 巨大 环形 银幕 。 
的 数 九 寒 天 ,珍珠 滩 瀑 布 雪 漆 与 冰 盖 相映 生 辉 , 飞 珠 溅 玉 , 瀑 声 雷 鸣 , 气 势 磅 磷 
24 | ee <a class= "detail" title=" 九 寨 沟 冬 景 一 绝 珍珠 滩 瀑 布 飞 珠 溅 玉 " 
25 href= ""> [详情 ]< /a>< /p> 
26 </1i> 
27 </ul> 
28 </div> 
29 </div> 
30 <div class="ec-g-2 ec-g-last"><!-- 行 业 新 闻 --> 
31 <div class= "Ww- box boxNewsList"> 
32 <h2><a href=""> 行 业 新 闻 < /a>< /h2> 
33 <a href="" class= "more"> 更 多 ggt;</a> 
34 <ul class= "w-m list"> 
35 <!-- 行 业 新 闻 文章 列表 - -> 
36 <1i class="info"><a class="title" href=""> 
37 达 古 冰山 去 年 游客 增长 45.34% 今年 四 大 举措 促 发 展 < /a> 
38 <p> 近 日 ,以 “携手 圣洁 冰山 、 共 创 多 彩 黑 水 ”为 主题 的 2015 年 度 达 古 冰山 景 
39 区 旅游 营销 宣传 县 谈 会 在 成 都 举行 , 达 古 冰山 管理 局 、 黑 水 县 旅游 局 等 单位 
40 相关 负责 人 和 来 自省 内 多 家 旅行 社 负责 人 、 新 闻 媒 体 记 者 一 起 ,回顾 了 
41 20…… <a href="" class= "detail"> [详情 ]</a>< /p> 





单元 10 网 页 中 元 素 与 整体 布局 的 应 用 设计 











续 表 

序号 HTML 代码 

42 </1i> 

43 </ul> 

44 </div> 

45 <!-- 行 业 动态 --> 

46 <div class= "w- box w- boxYellow boxNewsList"> 

47 <h2 class="tabs"><i class="tl"> gnbsp; </i><a href="" > 行业 动态 

48 </a></h2> 

49 <a href="" class= "more"> 更 多 ggt;</a> 

50 <ul class= "w- list"> 

51 <!-- 行 业 研究 文章 列表 --> 

页 <1i class= "info"><a class= "title" href- ""> 携 程 旅游 年 交易 额 破 百 亿 元 

53 增 速达 50%< /a> 

54 <p> 记 者 近日 从 携程 旅行 网 获悉 ,2014 年 携程 的 在 线 度假 相关 产品 交易 额 超 

55 过 100 亿 元 ,是 第 二 名 的 2 倍 以 上 ,增长 速度 超过 50* 。 在 跟 团 游 、 自 由 行 、 

56 出 境 游 、 国 内 游 .邮轮 等 事业 板块 ,保持 行业 第 一 。 以 出 境 游 …… <a href="" 

57 class= "detail"> [详情 ]< /a>< /p> 

58 </li> 

59 </ul> 

60 </div> 

61 </div> 

62 </div> 

63 </section> 


6. 保存 与 浏览 网 页 


保存 网 页 文档 1002. html, 在 Google Chrome 浏览 器 中 的 浏览 效果 如 图 10-23 
所 示 。 


任务 10-3 创建 等 距 排 列 的 4 列 式 布 局 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 
其 属性 。 

(2) 创建 网 页 文档 1003. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 1003. html 中 添加 必要 的 HTML 标签 实现 网 页 主体 布局 结构 。 

(4) 在 网 页 1003. html 中 添加 图 片 \ 标 题 文本 内 容 以 及 相应 的 HTML 标签 。 

(5) 浏览 网 页 1003. html 的 效果 ,如 图 10-24 所 示 ,该 网 页 为 等 距 排列 的 4 列 式 布局 
结构 。 
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达 十 二 出 受 区 门 村 都 江 生 写 区 门 订 全 票 青 镶 (由 党 区 门票 全 村 





图 10-24 网 页 1003. html 的 浏览 效果 


【任务 吝 施 】 


1. 创建 文件 夹 
在 文件 夹 Unit10 中 创建 子 文件 夹 1003, 再 在 该 文件 夹 中 创建 css images 子 文件 夹 。 
2. 定义 网 页 的 CSS 代码 


在 文件 夹 css 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 10-18 所 示 。 


表 10-18 网 页 1003. html 中 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 
01 | body { 
02 min- width: 1202px; 
03 x* width: 1202px; 
04 line- height: 2em; 
05 margin: auto; 
06 Color: #333; 
07 font- size: 12px; 
08 background- image: Url (../images/travel- bg.png); 
09 background- position: left top; 
10 background- repeat: repeat— x; 
11 background- color: #FFF; 
这 } 
13 
14 section { 
15 width: 1202px; 
16 position: relative; 
著 margin- top: 10px; 
18 } 
的 
20 nav, section { 
21 display: block; 
22 position: relative; 
23 margin: auto; 
24 } 
25 ul, 
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续 表 

序号 CSS 代码 

26 下 才 

27 list- style- type: none; 

28 list- style- position: outside; 

29 text- indent: 0; 

30 3 

31 

32 img { 

33 border: none; 

34 

35 

36 af 

Ez text- decoration: none; 

38 } 

39 

40 a:link, 

41 a:visited { 

42 text- decoration: none; 

43 Color: #666; 

44 

45 

46 a:hover { 

47 Color: #2b98db; 

48 } 





在 文件 夹 css 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 主体 布 


局 结构 的 CSS 代码 定义 如 表 10-19 所 示 。 


表 10-19 样式 文件 main. css 中 网 页 主体 布局 结构 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 .W-box { 下 
02 position: relative; 8 | .list=pic > { 
03 |} 19 position: relative; 
04 20 text- align: left; 
05 | .boxList { 21 —webkit— box- shadow: 0 0 Spx #EEE7 
06 margin- top: 10px; 22 —ms- box- shadow: 0 0 Spx #EEE; 
07 |} 23 box- shadow: 0 0 Spx #EEE; 
08 24 width: 260px; 
09 | .list-picli{ 25 margin: 10px Spx; 
10 padding: 10px 0 5px; 26 padding: 0; 
11 text- align: center; 2 overflow: hidden; 
12 margin: 5px 0 07 28 |} 
13 float: left; 29 
14 min- height: 150px; 30 | .list-pic>1i:hover { 
15 Width: 33.333333% 了 31 box- shadow: 0 0 Spx #43B6EB; 
16 |} 32 —webkit— transition: all .5s ease- jn; 
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续 表 

序号 CSS 代码 序号 CSS 代码 

33 transition: all .2s ease- in; 64 |} 

34 |} 65 | .list-pic -title { 

66 padding: 5px 0; 

|slist-pic liat 67 font- size: 14px; 

a font- weight: bold; 68 text- indent: 5px; 

38 } 69 font- family: "Microsoft YaHei"; 

39 70 background: linear- gradient (top, 

40 | .list-pic>1i .img-m, 71 #DDD 38% , #F3F3F3 100% ) 7 

41 | .list-pic>1i .img-m img{ 王 background- color: #F3F3F3\9; 

42 height: 165px; 73 color: #19aldb 

43 width: 260px; 74 下 

44 overflow: hidden; 75 

45 Imargin: auto; 76 | .list-pic .scenicInfo { 

46 本 position: absolute; 

47 |} 78 left: 50%; 

48 | .list-pic .title,.list-pic .prioeInfo { 79 top: 140px; 

49 width: 258px; 80 width: 260px; 

50 margin: auto; 81 margin- left: -~ 130px; 

51 border- left: #EEE lpx solid; 82 Color: #FFF; 

52 border- right: #EEE lpx solid; 83 padding: 4px 0 5px 0; 

53 |} 84 height: 16px; 

54 | .list-pic>1i .img-m img { 85 line- height: 16px; 

5 pagdding: 07 86 background- color: rgba (0,0,0, .62); 

56 border: 0; 87 font- weight: normal; 

57 display: block; 88 |} 

58 transition: all .5s; 89 

59 |} 90 .list-pic .scenicInfo .area { 

60 | .list-pic >1i:hover .img-m img { 91 float: right; 

61 transform: scale(1.1，1.1)7 92 margin- right: Spx; 

62 filter: Alpha (opacity= 90) 7 93 padding- left: Spx; 

63 opacity: .97 94 |} 














3. 创建 网 页 文档 1003. html 与 链接 外 部 样式 表 


在 文件 夹 1003 中 创建 网 页 文档 1003. html, 切换 到 网 页 文档 1003. html 的 【代码 视 


图 了 ,在 标签 “二 /head> ”的 前 面 输入 链接 外 部 样式 表 的 代码 如 下 : 


<link rel="stylesheet" type= "text/css" href= "css/base.css"> 
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<link rel="stylesheet" type= "text/css" href= "css/main.css"> 


4. 编写 网 页 主体 布局 结构 的 HTML 代码 
网 页 1003. html 主体 布局 结构 的 HTML 代码 如 表 10-20 所 示 。 
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表 10-20 网 页 1003. html 主体 布局 结构 的 HTML 代码 








序号 HTML 代码 
01 <section> 
02 <div class= "Ww- box boxList"> 
03 <ul class="list-pic"> 
04 <1i> 
05 <a href=""> 
06 <div class="img-m"> 
07 < img src= "images/t01.jpg"> 
08 </div> 
09 <div class= "title"> 单 门票 < /div> 
10 <div class="scenicInfo"> 
11 <i class="level"></i><i class="area"> 九 寨 沟 风景 区 < /i> 
了 到 </div> 
13 </a> 
14 <div class= "priceInfo"> 
15 <div class="price"><i class= "price-m"> ¥<i class="num"> 80.0< /i>< 
16 /i>< /div> 
17 <ahref=""> 
18 <button class="min button" type= "button"> 查 看 详情 < /button> 
19 </a> 
2 </div> 
21 </1i> 
22 lss </> 
23 < /> 
24 lls /i> 
25 </ul> 
26 </div> 





27 < /section> 


5. 在 网 页 中 添加 图 片 标 题 文本 内 容 以 及 相应 的 HTML 标签 


在 网 页 1003. html 中 添加 图 片 .标题 ,文本 内 容 以 及 相应 的 HTML 标签 ,对 应 的 
HTML 代码 如 表 10-21 所 示 。 


表 10-21 网 页 1003. html 完整 的 HTML 代码 





序号 HTML 代码 
01 “| <section> 
02 <div class= "w-box boxList"> 
03 <ul class= "list-pic"> 
04 < 了 > 
05 <a href=""> 
06 <div class="img-m"> 
07 < img src= "images/t01.jpg"> 
08 </div> 
09 <div class= "title"> 单 门票 < /div> 
10 <div class="scenicInfo"> 
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续 表 

序号 HTML 代码 

11 <i class= "area"> 九 寨 沟 风 景区 < /i> 

12 </div> 

13 </a> 

14 A 

旋 <1i> 

16 <a href=""> 

bm <div class="img-m"> 

18 < img src= "images/t02.jpg"> 

19 </div> 

20 <div class="title"> 达 古 冰山 景区 门票 < /div> 

21 <div class="scenicInfo"> 

22 <i class="area"> 黑 水 县 达 古 冰山 景区 </i> 

23 </div> 

24 </a> 

25 </li> 

26 <1i> 

27 <ahref=""> 

28 <div class="img-m"> 

29 < img src="images/t03.jpg"> 

30 </div> 

31 <div class= "title"> 都 江 堰 景区 门票 全 票 < /div> 

32 <div class="scenicInfo"> 

33 <i class="area"> 都 江 堰 景 区 < /i> 

34 </div> 

35 </a> 

36 </i> 

37 <1i> 

38 <a href=""> 

39 <div class="img-m"> 

40 < img src= "images/t04.jpg"> 

41 </div> 

42 <div class= "title"> 青 城山 景区 门票 全 票 < /div> 

43 <div class="scenicInfo"> 

44 <i class="area"> 青 城山 景区 </i> 

45 </div> 

46 </a> 

47 </]i> 

48 </ul> 

49 </div> 

50 </section> 





6. 保存 与 浏览 网 页 1003. html 
保存 网 页 文档 1003. html, 在 Google Chrome 浏览 器 中 的 浏览 效果 如 图 10-24 所 示 。 
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任务 10-4 创建 不 规则 布局 网 页 


【任务 描述 】 


(1) 创建 样式 文件 base. css 和 main. css, 在 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 
其 属性 。 

(2) 创建 网 页 文档 1004. html, 且 链接 外 部 样式 文件 base. css 和 main. css。 

(3) 在 网 页 1004. html 中 添加 必要 的 HTML 标签 文本 内 容 与 图 片 。 

(4) 浏览 网 页 1004. html 的 效果 如 图 10-25 所 示 , 该 网 页 为 不 规则 布局 结构 ,通过 绝 
对 定位 实现 。 





阿 栅 流 薪 Android 客 户 


同 员 友好 Android 靳 星 一 歌 霹 为 Android 叶 及 手机 
目的 雹 指南 、 茂 游 攻 略 和 网 上 项 订 | 门票、 三 要 。 季 还 和 
办 灾 让 全 是 游 硅 事 受 指 尖 这 营 的 乐 的， 














10-25 ”网 页 1004. html 的 浏览 效果 


【任务 吝 施 】 


1. 创建 文件 夹 
在 文件 夹 Unit10 中 创建 子 文件 夹 1004, 再 在 该 文件 夹 中 创建 css、images 子 文件 夹 。 
2. 定义 网 页 的 CSS 代码 


在 文件 夹 css 中 创建 样式 文件 base. css, 在 该 样式 文件 中 编写 样式 代码 ,代码 如 
表 10-22 所 示 。 
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表 10-22 网 页 1004. html 中 样式 文件 base. css 的 CSS 代码 定义 





序号 CSS 代码 序号 CSS 代码 
01 |body{ 16 -C_fixed:after 
02 line- height: 2em; 27 | 者 
03 margin: auto; 18 content: "."; 
04 Color: #333; 19 display: block; 
05 font- size: 12px; 20 font- size: 0; 
06 background- color: #FFF; 2 clear: both; 
07 |} 22 height: 0; 
08 23 visibility: hidden; 
09 |img{ 24 |} 
10 border: none; 25 
了 | 26 |ul,li{ 
12 27 list- style- type: none; 
13 laft 28 list- style- position: outside; 
14 text- decoration: none; 23 text- indent: 0; 
15. | 30 |} 














在 文件 夹 css 中 创建 样式 文件 main. css, 在 该 样式 文件 中 编写 样式 代码 ,网 页 主体 布 
局 结构 的 CSS 代码 定义 如 表 10-23 所 示 。 


表 10-23 样式 文件 main. css 中 网 页 主体 布局 结构 的 CSS 代码 定义 








序号 CSS 代码 
001 section { 

002 position: relative; 
003 margin- top: 20px; 
004 display: block; 

005 margin: auto; 

006 } 

007 

008 .appdownMain { 

009 width: 100%; 

010 margin- top: 0; 

011 background- position: top center; 
012 padding: 20px; 

013 } 

014 

015 .w-mf{ 

016 width: 720px; 

017 margin: auto; 

018 position: relative; 
019 } 

020 

021 -tabs { 

022 position: absolute; 
023 top: 30px; 

024 left: — 190px; 
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续 表 
序号 CSS 代码 
025 width: 245px; 
026 3 
027 
028 .tabs a:link, 
029 .tabs a:visited { 
030 display: block; 
031 height: 88px; 
032 line- height: 88px; 
033 background- image: 
034 Url (../images/menuBg .png); 
035 background- repeat: no- repeat; 
036 background- position: 15px — 98px; 
037 position: relative; 
038 margin: 15px 55px 0 0; 
039 padding: 0 0 0 80px; 
040 Color: #FFF; 
041 font- size: 16px; 
042 font- family: "Microsoft YaHei"; 
043 } 
044 
045 .tabs a:hover { 
046 Color: #FEO 
047 } 
048 
049 .tabs .on:link, 
050 .tabs .on:visited { 
051 background- position: 0 0; 
052 z-index: 37 
053 margin: 15px 0 0 0; 
054 } 
055 
056 .tabs i.ico { 
057 position: absolute; 
058 display: block; 
059 overflow: hidden; 
060 top: 50%; 
061 left: 30px; 
062 background- repeat: no- repeat; 
063 Z- index: 3; 
064 } 
065 .tabs i.ico-a, .tabs i.ico-b { 
066 background- image: Url (../images/menuICO.png); 
067 Width: 38px; 
068 height: 38px; 
069 margin- top: — 19px; 
070 } 
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续 表 
序号 CSS 代码 
071 
072 .tabs i.ico-b { 
073 background- position: 0 — 99px; 
074 } 
075 
076 .tabs i.ico-r { 
077 height: 21px; 
078 width: 21px; 
079 margin- top: -11px; 
080 left: auto; 
081 right: ~ 40px; 
082 background- image: Url (../images/menuP.png); 
083 background- position: 0 - 98px; 
084 } 
085 
086 .tabs .on i.ico-r { 
087 background- position: 0 0; 
088 right: 15px; 
089 } 
090 
091 .tabsContent { 
092 border- radius: 10px; 
093 box- shadow: 0 0 6px #CCC; 
094 background- color: #FFF; 
095 background- color: rgba (255, 255, 255, .85) 7 
096 padding: 25px 0; 
097 position: relative; 
098 z-index: 27 
099 filter: Alpha (opacity= 85) \0; 
100 _filter: Alpha (opacity= 85); 
101 } 
102 
103 .screenshot { 
104 position: absolute; 
105 left: 80px; 
106 top: 55px; 
107 } 
108 -Ww-m-m{ 
109 margin: 0 25px 0 55px; 
110 padding: 30px 25px 25px 320px; 
111 background- image: Url (../images/cBg.png); 
112 Color: #FFF; 
113 } 
114 -ww-m-mh3{ 
115 font- size: 14px; 
116 margin- top: 10px; 
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续 表 

序号 CSS 代码 
117 

118 -w-m-mplt{ 

119 text- indent: 2em; 

120 

121 -GownInfo { 

122 padding: 10px 50px 5px 380px; 

3 text—align: center; 

124 

125 .downInfo h3{ 

126 font- size:20px; 

Eg font— weight :bold; 

128 





3. 创建 网 页 文档 1004. html 与 链接 外 部 样式 表 


在 文件 夹 1004 中 创建 网 页 文档 1004. html, 切 换 到 网 页 文档 1004. html 的 [代码 ] 视 
图 ,在 标签 二/head 二 ”的 前 面 输入 链接 外 部 样式 表 的 代码 如 下 : 


<link href= "css/base.css" rel="stylesheet" type= "text/css"> 


<link href="css/main.css" rel= "stylesheet" type= "text/css"> 


4. 在 网 页 1004. html 中 添加 必要 的 HTML 标签 .文本 内 容 与 图 片 


网 页 1004. html 完整 的 HTML 代码 如 表 10-24 所 示 。 


表 10-24 网 页 1004. html 完整 的 HTML 代码 





序号 HTML 代码 
01 <section> 
02 <div class= "appdownMain"> 
03 <div class= "w-m" id= "appDownContent"> 
04 <div class= "tabs"> 
05 <a href= "# Rndriod" class= "on"> 
06 <i class= "ico ico-a"> gnbsp;< /i>Andriod 
07 <i class= "ico ico-r"> gnbsp;</i> 
08 </a> 
09 <a href= "# iPhone"> 
10 <i class= "ico ico-b"> gnbsp;< /i> iPhone 
11 <i class="ico ico-r"> gnbsp;</i> 
12 </a> 
13 </div> 
14 <div class= "tabsContent"> 
15 < img src= "images/andriod _ screenshot.png"” width="260" height="508" class 
16 ="screenshot"> 
17 <div class="w-m-m"> 
18 <h3> 阿 坝 旅游 Android 客 户 < /h3> 
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续 表 

序号 HTML 代码 

19 <p> 阿 坝 旅游 android 版 是 一 款 专 为 Android 智 能 手机 系统 推出 的 旅游 移动 平 

20 台 , 为 阿坝 旅游 提供 快捷 的 旅游 目的 地 指南 、 旅 游 攻略 和 网 上 预订 门票 .车 票 、 

21 索道 和 和 餐饮 ,让 全 国 游客 享受 指 尖 旅游 的 乐趣 。< /p> 

E22 <h3> 基 本 功能 < /h3> 

23 <p> 目 的 地 指南 、 旅 游 攻略 、 阿 坝 资讯 和 门票 预订 等 。< /p> 

24 </div> 

25 <div class="downInfo c fixed"> 

26 <h3> 扫 描 二 维 码 下 载 </h3> 

2 < img src= "images/codeAndriod.png" width= "140" height= "140"> 

28 </div> 

29 </div> 

30 </div> 

31 </div> 

32 </section> 





5. 保存 与 浏览 网 页 
保存 网 页 文档 1004. html, 在 Google Chrome 浏览 器 中 的 浏览 效果 如 图 10-25 所 示 。 


【同步 训练 】 
任务 10-5 创建 浮动 定位 2 列 规则 分 块 的 网 页 


(1) 创建 样式 文件 main. css, 在 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 1005. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 1005. html 中 添加 必要 的 HTML 标签 ,文本 内 容 与 图 片 。 

(4) 浏览 网 页 1005. html 的 效果 如 图 10-26 所 示 ,该 网 页 整体 上 为 左 、 右 布局 结构 ,其 
中 左 侧 和 右 侧 又 分 为 上 、 下 两 个 组 成 部 分 。 





Wi 


神仙 油 风景 区 位 于 川西 北 襄 原 柄 山 山脉 南 笑 九 塞 沟 县 大 录 乡 ,与 九 
案 沟 到 到 相 望 ， 压 甘 海子 45 公 里 ， 神 仙 池 是 意 酒 “ 嫩 志 对 措 ” 的 汉 评 ， 
全 黄龙 及 刻 守 光 之 关于“ 身 ， 意 为 仙女 沐浴 的 地 方 。 景 区 主要 景点 分 
在 幸 长 达 3000 米 、 谭 约 311 米 的 高 山 峙 合 之 中 。 芍 个 号 区 裕 尘 其 的 林 
污 包 本 ， 录 区 被 放大 的 天 本 和 到 集 的 解 竹 分 成 三 个 是 点 :上 部 称 “ 芝 台 
号 条” ， 中 用 为 “仙女 油 ” ,下 让 各 “全 流 泛 演 ” 。 神仙 地 海 扶 高 度 只 
有 2000 多 米 , 相对 第 差 也 只 有 300 多 米 , 游 计 的 可 进入 性 很 再 。 而且， 
神仙 池 录 区 了 服 人 数 进 入 ， 卫 在 为 游客 打 迄 浓 字 生 志 空 间 。 
更 多 > 


图 10-26 ”网 页 1005. html 的 浏览 效果 
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提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 





任务 10-6 创建 3 列 式 与 4 列 式 
等 距 布局 的 网 页 


(1) 创建 样式 文件 main. css, 在 样式 文件 中 定义 标签 的 属性 、 类 选择 符 及 其 属性 。 

(2) 创建 网 页 文档 1006. html, 且 链接 外 部 样式 文件 main. css。 

(3) 在 网 页 1005. html 中 添加 必要 的 HTML 标签 .文本 内 容 与 图 片 。 

(4) 浏览 网 页 1006. html 的 效果 ,如 图 10-27 所 示 ,该 网 页 为 3 列 式 等 距 排列 的 布局 
结构 ,每 1 个 版 块 上 方 为 图 片 ,下 方 为 文字 内 容 。 








图 10-27 网 页 1006. html 的 浏览 效果 


(5) 尝试 将 3 列 式 等 距 布局 结构 更 改 为 4 列 式 等 距 布 局 结构 ,并 浏 


览 其 效果 。 
提示 : 请 扫描 二 维 码 浏览 提示 内 容 。 


【技术 进 阶 】 


1. 网 页 中 元 素 间 距 的 计算 


(1) 元 素 间 水 平 间 距 的 计算 。 当 两 个 或 多 个 元 素 并 列 分 布 时 ,元 素 
内 容 之 间 的 水 平 间距 由 外 边 距 ,边框 和 内 边 距 多 个 因素 共同 控制 。 
(2) 元 素 间 垂直 间距 的 计算 。 计 算 上 、 下 两 个 元 素 之 间 的 垂直 间距 
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要 比 计算 左右 元 素 之 间 的 水 平 间距 复杂 一 些 , 计 算 方式 也 不 同 。 
2. 网 页 的 单列 式 布局 与 元 素 的 自 适应 技术 


大 小 能 够 根据 乔 吕 或 人 ee 这 就 是 元 来 的 自 适应 。 元 素 
自 适应 在 网 页 布局 中 很 重要 , 它 能 够 使 网 页 显示 更 加 灵活 。 

(1) 单列 式 网 页 布局 的 宽度 控制 。 

(2) 单列 式 布局 的 高 度 控 制 。 


3. 网 页 的 两 列 式 布局 技术 


(1) 左 \ 右 两 列 都 采用 浮动 布局 。 

(2) 左右 两 列 中 只 有 一 列 采用 浮动 布局 , 另 一 列 自 适应 宽度 。 
(3) 左右 两 列 采 用 绝对 定位 的 层 布 局 模型 。 

(4) 负 外 边 距 的 布局 方式 。 


4. 三 列 式 网 页 布局 技术 


:= 列 式 网 页 布局 也 是 一 种 常见 的 布局 形式 ,一 般 可 以 使 用 浮动 布局 方式 或 层 
式 实现 ,实现 的 样式 也 多 种 多 样 。 

(1) 三 列 浮 动 布局 。 

(2) 两 列 浮动 布局 。 

(3) 嵌 套 浮动 布局 。 

(4) 并 列 层 布 局 。 


5. 多 行 多 列 式 网 页 布局 技术 


(1) 多 行 多 列 混合 布局 。 
(2) 并 列 浮动 的 多 行 多 列 布局 。 
(3) 利用 列表 项 的 多 列 布局 。 


【问题 探究 】 


【问题 1】 网 页 页 面 内 容 编排 的 基本 原则 有 了 哪些? 

页 面 内 容 编排 的 基本 原则 如 下 : 

(1) 主 次 分 明 .中 心 突出 。 

(2) 大 小 搭配 、 相 互 呼应 。 

(3) 图 文 并 茂 、 相 得 益 彰 。 

(4) 适当 留 空 清晰 易 读 。 

【问题 2】 对 网 页 页 面 内 容 分 块 有 哪些 方法 ? 

(1) 利用 留 空 和 画 线 进行 分 块 。 利 用 留 空 和 画 线 对 版 面 内 容 进 行 分 块 ,能 丰富 网 页 
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的 视觉 表现 力 ,呈现 较 好 的 艺术 效果 。 直 线条 能 体现 挺拔 、 规 矩 整齐 的 视觉 效果 ,运用 直 
线 分 块 呈 现 井 井 有 条 、 泾 渭 分 明 的 视觉 效果 ;曲线 能 体现 流动 .活跃 ,动感 的 视觉 效果 , 运 
用 曲线 分 块 呈现 流畅 ,轻快 .富有 活力 的 视觉 效果 。 

(2) 利用 色 块 进行 分 块 。 利 用 色 块 进行 分 块 不 必 占 用 有 限 的 空间 ,在 没有 空白 的 版 
面 上 ,也 可 以 达到 分 组 的 效果 。 色 块 对 于 版 面 分 块 十 分 有 效 , 同 时 其 自身 也 传达 出 某 种 信 
息 。 使 用 色 块 进行 分 块 时 ,对 网 页 整体 色彩 印象 要 有 所 规划 。 

如 果 将 色 块 与 空白 一 起 使 用 进行 版 面 分 块 , 效 果 最 佳 。 

(3) 利用 线 框 分 块 。 线 框 多 用 在 需 对 版 面 个 别 内 容 进 行 着 重 强 调 时 , 线 框 在 页 面 中 
通常 都 起 强调 和 限制 作用 ,使 页 面 中 的 各 元 素 获 得 稳定 与 流动 的 对 比 关 系 , 反 衬 出 页 面 的 
动感 。 

【问题 3】 何谓 网 站 的 Logo? Logo 有 哪些 表现 形式 ? 

Logo 是 网 站 的 标志 和 名 片 ,例如 搜狐 网 站 的 狐狸 标志 ,如 同 商标 一 样 ,Logo 是 网 站 
特色 和 内 涵 的 集中 体现 ,看 见 Logo 就 联想 起 网 站 ,一 个 好 的 Logo 往往 会 反映 网 站 的 某 
些 信息 ,特别 是 对 一 个 商业 网 站 来 说 ,可 以 从 中 基本 了 解 到 这 个 网 站 的 类 型 或 者 内 容 。 

Logo 标志 可 以 是 中 文 或 英文 字母 ,也 可 以 是 符号 或 图 案 , 还 可 以 是 动物 或 者 人 物 等 。 
Logo 的 表现 形式 可 以 分 为 三 个 方面 。 

(1) 网 站 有 代表 性 的 人 物 .动物 和 花草 ,可 以 用 它们 作为 设计 蓝本 ,加 以 卡通 化 和 艺 
术 化 。 例 如 迪士尼 网 站 的 米 老 鼠 , 搜 狐 网 的 卡通 狐狸 等 。 

(2) 网 站 有 代表 性 的 物品 ,可 以 用 物品 作为 标志 ,例如 奔驰 汽车 的 方向 盘 标 志 、 中 国 
银行 的 铜板 标志 等 。 

(3) 用 自己 网 站 的 英文 名 称 作 标志 ,采用 不 同 的 字体 或 字母 的 变形 制作 标志 。 

【问题 4】 网 页 的 页 面 宽度 长度 和 网 页 文件 大 小 有 哪些 要 求 ? 回 ， 

(1) 网 页 的 宽度 。 下 二 

(2) 网 页 的 长 度 。 

(3) 网 页 文件 大 小 。 

【问题 5】 简 述 网 站 的 基本 开发 流程 

虽然 每 个 网 站 的 主题 内容、 规模 、 功 能 等 方面 都 各 有 不 同 , 但 是 有 一 个 基本 的 开发 流 
程 可 以 遵循 。 网 站 的 基本 开发 流程 如 下 。 

第 一 阶段 : 规划 网 站 和 准备 素材 阶段 。 

(1) 需求 分 析 ,决定 网 站 的 主题 和 风格 。 

(2) 收集 资料 ,准备 素材 并 进行 整理 修改 。 

(3) 规划 网 站 栏目 结构 .目录 结构 ,链接 结构 和 版 式 结构 。 

第 二 阶段 : 设计 与 制作 网 页 阶段 。 

(1) 网 站 总 体 设 计 。 

(2) 设计 与 制作 网 站 的 主页 .二 级 页 面 和 内 容 页 面 等 。 

(3) 将 各 个 网 页 通过 超级 链接 进行 整合 。 

第 三 阶段 : 测试 ,发布 ,推广 与 维护 网 站 阶段 。 

(1) 测试 .调试 与 完善 网 站 。 
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(2) 发 布 与 推广 网 站 。 

(3) 维护 与 更 新 网 站 。 

【问题 6】 网 站 开发 过 程 时 ,应 尽量 做 到 命名 规范 ,列举 CSS 布局 .网 页 区 块 、 类 、 导 
航 和 文件 常用 的 名 称 。 

(1) CSS 布局 的 常用 名 称 。 

(2) 网 页 区 块 的 常用 名 称 。 

(3) 类 的 常用 名 称 。 

(4) 导航 的 常用 名 称 。 

(5) 文件 的 常用 名 称 。 


【单元 习题 】 


(一 ) 单项 选择 题 

(二 ) 多 项 选择 题 

(三 ) 填空 题 

(四 ) 简 答题 

提示 : 请 扫描 二 维 码 浏览 习题 内 容 。 


i [e] 
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附录 A CSS 的 属性 


.CSS 尺寸 单位 

.CSS 文本 属性 (Text) 

.CSS 字体 属性 (Font) 

.CSS 颜色 表示 方式 

.CSS 颜色 属性 (Color) 

.CSS 背景 属性 (Background) 
.CSS 尺寸 属性 (Dimension) 
.CSS 列表 属性 (List) 

.CSS 链接 属性 (Hyperlink) 

.CSS 表格 属性 (Table) 

.CSS 框 模型 属性 (Box) 

12. CSS 边框 属性 (Border 和 Outline) 
13. CSS 外 边 距 属 性 (Margin) 

14. CSS 内 边 距 属 性 (Padding) 

15. CSS 定位 属性 (Positioning) 

16. CSS 动画 属性 (Animation) 

17. CSS 多 列 属性 (Multi-column) 
提示 : 请 扫描 二 维 码 了 解 详细 内 容 。 
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附录 B CSS 的 选择 器 


.CSS 选择 器 表示 方法 及 使 用 说 明 
。CSS 选择 器 规则 

.CSS 元 素 选择 器 

.CSS 选择 器 的 分 组 

.CSS 的 后 代 选 择 器 

.CSS 的 类 选择 器 

。CSS 的 id 选择 器 

.CSS 的 属性 选择 器 

.CSS 的 子 元 素 选择 器 

10. CSS 的 相 邻 选择 器 

11. CSS 的 伪 类 和 伪 元 素 

提示 : 请 扫描 二 维 码 了 解 详细 内 容 。 
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